0

I need to show real time data through angular data table 500 to 1000 datas would come in a minute, I can able to bind data but data table isn't working and I am getting data from the web socket. any help ?

HTML:

        <div class="tab_container">
            <table datatable class="row-border hover" id="detailedreportproduct">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>First name</th>
                        <th>Last name</th>
                    </tr>
                </thead>
                <tbody>
                    <tr  *ngFor="let item of binddatatable">
                        <td>{{binddatatable.id}}</td>
                        <td>{{binddatatable.fname}}</td>
                        <td>{{binddatatable.lname}}</td>
                    </tr>
                   

                </tbody>
            </table>
        </div>

TS:

let ws = new WebSocket('ws://192.168.1.254:7851');
ws.onopen= () =>{
  console.log("wsconnected");

  ws.send(JSON.stringify({"MsgID":"ReqData"}));



}


ws.onmessage =(e) =>{


 let Table = $('#detailedreportproduct').DataTable();

  this.dataObj = JSON.parse(e.data)

  this.binddatatable = dataObj;

}

guru
  • 7
  • 6

1 Answers1

0

You're creating your web socket using vanilla javascript (i.e. something like: ws = new Websocket(url)) ...

The problem with this approach is that the socket is created outside Angular's scope and it is not aware that such socket is changing the state of your other angular components ...

So, after you modify your state in the ws.onmessage function, you need to tell Angular to iterate over its state and refresh anything that has changed ... to do that, you can apply one of the methods described here.

Carlitos Way
  • 3,279
  • 20
  • 30
  • Thanks for your reply, How can I use that Apply thing for angular 4 ? – guru Apr 24 '21 at 06:21
  • @guru, It seems to me that are plenty of examples in the link I give you ... also you can use this [one](https://stackoverflow.com/a/42695581/1474069) – Carlitos Way Apr 24 '21 at 06:32
  • Thanks for your response, i=I'll try this and keep you updated about the results. – guru Apr 24 '21 at 07:10
  • Hi @CarlitosWay I have tried this method, I can view the data but still No data availabe in the table message is showing along with the bind datas, any help ? – guru Apr 26 '21 at 06:50