如何将我的大数据插入 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-virtual-scroller。