如何通过Angular数据table显示实时数据？

Question

我需要通过 angular 数据显示实时数据 table 500 到 1000 数据将在一分钟内到达，我可以绑定数据，但数据 table 不行工作，我正在从网络套接字获取数据。有帮助吗？

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;

}

Answer 1

您正在使用 vanilla javascript 创建您的网络套接字（即类似于：ws = new Websocket(url)）...

这种方法的问题是套接字是在 Angular 的范围之外创建的，并且不知道这种套接字正在改变其他 angular 组件的状态...

因此，在 ws.onmessage 函数中修改状态后，您需要告诉 Angular 迭代其状态并刷新任何已更改的内容...为此，您可以应用 .

中描述的方法之一

如何通过Angular数据table显示实时数据？

How to display real time data thorugh Angular data table?

angular

angular-datatables