如何将我的大数据插入到html中的块中

Question

我正在进行一个http调用，其中响应来自API。这是一个大数据，所以当我试图通过浏览器将其插入HTML时，会冻结

ngOnInit() {
const params = {
page: 1,
size: 100000
}
this.testSer.getPassengers(params).subscribe(
(data: any) => {
this.data = data.data;
})
}

<ul *ngFor="let item of data; let i = index">
{{ i}} -- {{ item.name }}
</ul>

我怎样才能把区块的工作交给浏览器？

我尝试了什么

在过去的某个地方，我看到了一个类似于的代码

ngOnInit() {
const params = {
page: 1,
size: 100000
}
this.testSer.getPassengers(params).subscribe(
(data: any) => {
this.data = data.data;
this.timeoutInterval = setTimeout(() => {
this.loopChunks();
}, 150);
})
}
loopChunks() {
if (this.currentChunk < this.data.length) {
this.currentChunk += this.chunkStep;
this.timeoutInterval = setTimeout(() => {
this.loopChunks();
}, 1000);
}
}

他用了setTimeout，但我不能让它工作

Answer 1

我认为渲染DOM元素本身就是冻结浏览器的原因。

您可能想在表格中添加虚拟滚动，以便只显示屏幕上当前可见的内容，而不是一次显示所有内容。

有很多库可以帮助您做到这一点，比如Clusterize或ngx虚拟滚动器。