以角度呈現數據的最佳方式

Question

我想以角度呈現表格形式的數據到前端，並且在那裏我已經使用了ng-grid和ui-grid。

但他們似乎在減慢性能，因爲有很多行有時會像單個頁面上的每個網格200多個網格和超過20個網格。

因此，大多數時候瀏覽器掛斷我只需要顯示數據不需要對數據執行操作。它只是需要渲染。

因此，如果您有任何其他想法以網格形式呈現這些數據，任何人都可以提供幫助。

Answer 1

在網格行中使用一次綁定。 {{:: data.id}}。這將提高您的頁面性能，因爲在第一次綁定完成後手錶將被移除。

但請記住，如果您更改模型中的任何更改，則在使用一次性綁定時，您無法在視圖中看到它們。

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

如果您使用的版本低於1.3，那麼可能你必須改變你的設計。而不是顯示超過20個網格，根據一些選擇下拉列表，每次只顯示一個網格。

你也可以試試ng-table指令。但是，如果您使用的網格超過200行，即使速度變慢。

如果手錶超過2000個，角度應用會變得緩慢。在您的情況下，有20 * 200 = 4000個手錶。如果你有更多的網格和行，更要注意。所以更好地改變你的設計或使用一次綁定。

Answer 2

如何在ui-grid中處理這個問題有幾個選項。

對於flatEntityAccess，在ui-grid中有一個選項，可以提高綁定的性能。

許多人將它們的網格放在選項卡中，並在選項卡周圍使用ng-if，以便只在該選項卡處於活動狀態時才呈現網格。

如果您需要頁面中列表中的所有網格，大概並非所有網格都可以同時顯示給用戶（您不可能有20個網格全部可見，可能只有一個或兩個網格可見你可以檢測頁面滾動，並在網格中使用ng-if，以便只顯示那些實際可見的頁面。

最終問題是如果你有10列，或許有15行可見每個網格，即每個網格150個觀察者，如果你有20個網格，你的網頁上有2000多個觀察者，並且每當你滾動任何一個網格時，都必須對它們進行評估。與可見行的數量，可見列的數量以及與之相關的網格的數量相關重新呈現。如果你希望它變得更快，最終你需要改變其中的一個元素。

最後，您可能需要檢查版本rc20，甚至是當前不穩定的版本比舊版本候選版本更快。