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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (92)

我需要在Angular中创建一个大而动态的表。来自Web服务器的数据通过websocket并保存在Map中。

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数据单元,并且我在其中存储数据的地图的大小可以增长到数千个项目;

我有2个问题:

1-用这个代码表是如此之大,页面有一个可怕的滞后。什么是最好的解决方案来显示一个包含数千行和数据经常变化的大表?我也在寻找一种解决方案,如果可能的话,可以动态地加载表。

2-我的代码写错了,它不起作用。 “ExpressionChangedAfterItHasBeenCheckedError:表达式在检查后发生了变化。 如何解决?

提问于
用户回答回答于

1)虚拟化表行。查看ag网格,看看它是如何完成的。2)尝试将本地数据的设置移动到视图init(ngAfterViewInit)之后,但这确实应该在服务中完成。发布完整的堆栈。

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

扫码关注云+社区

领取腾讯云代金券