Question

我需要在Angular中创建一个大型动态表。数据通过WebSocket来自Web服务器，并保存在地图中。

export class MyComponent implements OnInit {
ngOnInit()
{
this.socket=io("localhost");
this.socket.on('data' , (t)=>{

// parse data 
let data = JSON.parse(t);
//check if data is already exist in Map
let item = this.datas.get(data.Id.toString());
if(item){
// if exist update it
}
else{
// if not exist add it to map
}

});
}
}

我创建一个表来显示如下数据：

<div >
   <tr *ngFor="let data of datas ;  let i = index">

  <td>{{ data.info1 }}</td>
  <td>{{ data.info2 }}</td>
  <td>{{ data.info3 }}</td>
  <td>{{ data.info4 }}</td>

  </tr>

</div>

每秒可以从网络服务器收到数百个json数据单元，并且存储数据的Map的大小可以增长到数千个；

我有2个问题：

1-使用此代码，表格很大，页面滞后。显示具有成千上万行且数据频繁更改的大表的最佳解决方案是什么？而且我也在寻找一种解决方案，可以部分地动态加载表。

2-我写的代码出错，并且不起作用。
“ ExpressionChangedAfterItHaHasBeenCheckedError：检查表达式后，表达式已更改。
该如何解决？

Answer 1

1）虚拟化表行。查看农业网格，看看如何完成。 2）尝试将本地数据的设置移动到view init后（ngAfterViewInit），但这实际上应该在服务中完成。发布完整的堆栈。

如果您使用的是socket.io，则有效负载应该已经是JSON，不需要JSON.parse。

Angular-创建一个大而动态的表

1 个答案: