以角度方式在表格中呈现数据的最佳方式

Question

我正试图以表格形式将数据呈现为角度前端，并且到目前为止我已经使用过ng-grid和ui-grid。

但它们似乎正在降低性能，因为有更多的行有时像每个网格200多个，单页上超过20个网格。

因此浏览器大部分时间都会挂起我只需要显示数据就不需要对数据执行任何操作。它只需要渲染。

如果您有任何其他想法以网格形式呈现这么多数据，请任何人帮忙。

Answer 1

如何在ui-grid中处理此问题有几个选项。

flatEntityAccess的ui-grid中有一个选项，可以提高绑定的性能。

许多人将他们的网格放在标签中，并在标签周围使用ng-if，以便只有在该标签处于活动状态时才会呈现网格。

如果您需要页面下方列表中的所有网格，可能并非所有网格同时对用户可见（您无法看到20个网格，可能只有一两个网格可见您可以检测页面滚动并在网格上使用ng-if，以便只渲染实际可见的页面。

最终的问题是，如果你在每个网格中有10列，也许15行可见，那么每个网格立即有150个观察者，如果你有20个网格，那么你的观察者就有2000多个观察者每当您滚动任何网格时，都必须评估所有这些页面。请注意，每个网格的观察者与可见行数，可见列数以及呈现的网格数相关联。最终，如果您希望它更快，您需要更改其中一个元素。

最后，您可能需要检查版本 - rc20，甚至当前不稳定版本比旧版本候选版本更快。

Answer 2

在网格行中使用一次性绑定。 {{:: data.id}}。这将提高您的页面性能，因为手表在第一次绑定完成后被删除。

但请记住，如果您更改了任何模型更改，则在使用一次绑定时无法在视图中看到它们。

在Angular 1.3中引入了一次绑定。我使用的是Angular 1.3或更高版本。

如果您使用的是低于1.3的版本，则可能需要更改您的设计。而不是显示超过20个网格，根据一些选择下拉，一次只显示一个。

您也可以尝试ng-table指令。但是如果你使用20个超过200行的网格，即使这样也会变慢。

如果手表超过2000，角度应用会变慢。在你的情况下有20 * 200 = 4000手表。如果你有更多的网格和排，那就更加注意了。因此，最好更改您的设计或使用一次性绑定。