AngularJS ngRepeat在清除批量數據時顯示行爲遲緩

我創建了一個ng-repeat的表格，tr元素有1.000條記錄。當我通過更改ng-repeat所綁定的項目來過濾表格元素時，清理表格時出現奇怪的行爲。AngularJS ngRepeat在清除批量數據時顯示行爲遲緩

就這個問題而言，我已儘量減少對最簡單表達式的要求。

這是我的Typescript代碼加載1.000數據時，點擊按鈕加載和加載只有1條記錄，當點擊重置按鈕。

SearchFilters =() => { 
    this.dataSEJLABELCurrent = []; 
    for (var i = 0; i < 1000; i++) { 
     this.dataSEJLABELCurrent.push({ SEJCOD: "sej" + i, ADMDAT: "19650521", ADMHEU: "72800", SORDAT: "19650521", SORHEU: "72800", PATCOD: "35", PATPRE: "j" + i, PATNOM: "n" + i, NAIDAT: "19650521" }); 
    } 
} 

ResetFilters =() => { 
    var i = 0; 
    this.dataSEJLABELCurrent=[{ SEJCOD: "sej" + i, ADMDAT: "19650521", ADMHEU: "72800", SORDAT: "19650521", SORHEU: "72800", PATCOD: "35", PATPRE: "j" + i, PATNOM: "n" + i, NAIDAT: "19650521" }]; 

}

這是我與ng-repeat HTML頁面：

<tbody> 
    <tr ng-repeat="item in vm.dataSEJLABELCurrent" class="pointer shadow hover"> 
     <td>{{::item.SEJCOD}}</td> 
     <td>{{item.ADMDAT}} {{item.ADMHEU}}</td> 
     <td>{{item.SORDAT}} {{item.SORHEU}}</td> 
     <td>{{::item.PATCOD}}</td> 
     <td>{{::item.PATPRE}}</td> 
     <td>{{::item.PATNOM}}</td> 
     <td>{{item.NAIDAT}}</td> 
    </tr> 
</tbody>

當我點擊過濾器按鈕，什麼視覺上出現的情況是：

我的新推記錄顯示在當前的頂部記錄在屏幕上。
HTML表格中現在有1000 + 1條記錄。
其他（以前的）記錄在2秒內逐一刪除。
在某些時候，所有的原始1.000記錄都將被刪除，並保留新的記錄。

它看起來像我的記錄HTML側增加速度放緩，甚至更多，從我所看到的每一個小節的操作顯示行爲正在放緩的過程中，每操作：

添加新屬性來顯示（甚至複製相同的內容，例如顯示10倍SEJCOD）。
添加一個函數，例如vm.formatOwnDate(item.ADMDAT)而不是item.ADMDAT。
在tr元素上添加ui-sref="sejlabel({sejcod:'{{item.SEJCOD}}'})"。

我不明白爲什麼這種行爲只出現在明確而不是顯示數據呢？

這是一個gif的行爲：http://imgur.com/y74VHcf（點擊它可以全屏顯示）。

更新ng-repeat模型從1.000到1記錄創建一個奇怪的行爲，就像它從屏幕上清除記錄2秒一樣，因爲它有很多工作要做，但從1更新到1.000是即時的。

來源

2017-06-01 Romain

猜測這有做呈現新視圖沒有1000條記錄與在已經與1000視圖記錄並添加1個。 – rrd

1000綁定真的會讓你的系統崩潰，角度不是爲了這個。我建議你使用分頁或其他東西。 – Michelangelo

使用ng-repeat功能進行跟蹤。這應該可以解決你的問題。

<div ng-repeat="n in [42, 42, 43, 43] track by $index"> 
    {{n}} 
</div>

您可以按$索引或任何唯一ID進行跟蹤。

有關詳情，請：https://docs.angularjs.org/api/ng/directive/ngRepeat

來源

2017-06-01 10:40:22 Ashvin777

發現的問題。我的應用程序中有ngAnimate模塊，當我的表格被清除時，它正在應用他自己的類。使用這些類，它在CSS中添加淡入淡出效果轉換。

我需要防止對我的表ngAnimate行爲：

.no-animate * { 
    -webkit-transition: none !important; 
    transition: none !important; 
}

和

<table class="table no-animate">

來源

2017-06-01 13:57:40 Romain

恭喜發現。順便說一句，這是肉行動https://github.com/angular/angular.js/blob/master/src/ng/directive/ngRepeat.js#L510。爲了進一步優化速度，您可以將'track by'應用於'ng-repeat'並且從'{{}}'移動到'ng-bind ='''樣式，它應該增加2倍以上的觀看效果[詳情]（http://www.codelord.net/2017/03/23/the-performance-difference-between-ng-bind-and-%7B%7B%7D%7D/）。 –

AngularJS ngRepeat在清除批量數據時顯示行爲遲緩

回答

相關問題