角嵌套* ngFor /渲染性能

Question

我遇到了性能问题-我似乎无法解决。

基本上我有一个像这样的动态表结构，

<div class="container">
  <div *ngFor="let column of columnData">
    <div *ngFor="let rowItem of column.rowItems">
      <div [innerHTML]="getHtml(rowItem.info)"></div>
    </div>
  </div>
</div>

在我的组件中，我有一个函数，该函数接收rowItem数据，然后像这样返回一些html标记

getHtml(data) {
  if (...) {
    return `
      <div>
        ...
      </div>
    `
  } else if {
    return `
      <svg>
        ...
      </svg>
    `
  } else {
    ...
  }
}

现在我的数据结构如下

columnData = [
  {
    columnHeader: 'test'
    rowItems: [
      {
         rowHeader: 'test',
         value: 1
      },
      // ...
    ]
  },
  // ...
]

因此可能有100列，每个column都有25个rowItems-现在的rowItems几乎相同，除了值+我没有显示的其他值，例如rowHeader始终保持不变。

因此，要使布局正确显示，我们需要遍历每个column并遍历每个rowItem-因此这成为嵌套的for循环。现在只有少量数据可以正常工作-但是我们有很多数据，有些对象有100列和50行，因此这会大大降低站点速度-这就是性能

您会看到很多脚本，现在，当我删除嵌套的for循环时，将得到以下内容

很大的进步，但是显然我仍然需要能够生成rowItems.

我已经尝试过使用虚拟列表-但是滚动时它仍然很笨拙/有故障。

通常发生的情况是，我在水平滚动整个屏幕时会变白，并在浏览器中收到此警告

我还尝试了渐进式渲染，一次只能渲染10列，但这仍然不是很出色。

我还能做些什么吗？

任何帮助将不胜感激

按照建议，我试图像这样实现trackBy

<div class="container">
  <div *ngFor="let column of columnData; trackBy: columnTrackByFn">
    <!-- ... -->
    <div *ngFor="let rowItem of column.rowItems; trackBy: rowTrackByFn">
      <!-- ... -->
    </div>
  </div>
</div>

columnTrackByFn(index, item) {
  return item.colId;
}

rowTrackByFn(index, item) {
  return item.rowId;
}

它没有帮助，如果有什么变慢的话