angular 2x嵌套用于循环性能

Question

所以我们目前有一个网格组件。此网格组件接收包含网格配置的json。

我们关注的是列，所以配置看起来像

const configs = {
  columns: [{
    key: "name",
    title: "Name"
  },
  {
    key: "addressValue",
    type: "Address"
  },
  ....
  ]
}

此配置的数据源json看起来像

[{
  name: "Jack",
  address: "Somewhere"
},
{
  name: "John",
  address: "Somewhere"
}]

为了呈现这个，我们有一个看起来像（简化）的模板，如

<div *ngFor="let row of dataSource; let i = index;">
  <div *ngFor="let column of config.columns">
    {{ row[column.key] }}
  </div>
</div>

当我们有大量记录（350+等记录）时，我们注意到了一个很大的缓慢。然后我们继续删除循环列，将性能从大约600毫秒提高到100毫秒。

所以问题是我们如何保持我们的列动态并提高性能？我们还简要检查了一些角度2网格组件，这些组件显示它们动态呈现列并接受以列为参数的json配置。