我需要在Angular中创建一个大的动态表格。来自web服务器的数据通过websocket并保存在地图中。
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>
有可能每秒从per服务器接收数百个json数据单元,并且其中的Map的大小增长到数千个项目;
我有两个问题:
1-使用这段代码,表格太大了,页面有可怕的滞后。显示包含数千行和频繁更改数据的大表的最佳解决方案是什么?如果可能的话,我还在寻找一种解决方案,以便部分地和动态地装入表。
2-我写的代码出错,而且不能工作。
"ExpressionChangedAfterItHasBeenCheckedError:表达式在检查后已更改。
如何修复它?
发布于 2018-07-31 21:22:57
1)对表行进行虚拟化。看看ag grid是如何做到这一点的。2)尝试将本地数据的设置移动到after view init (ngAfterViewInit
),但这确实应该在服务中完成。发布整个堆栈。
如果您使用的是socket.io,那么有效负载应该已经是JSON,不需要JSON.parse。
https://stackoverflow.com/questions/51614315
复制相似问题