バルクデータをクリアすると、表示が遅く表示される

Question

trの要素に1.000レコードのng-repeatというテーブルを作成しました。 ng-repeatがバインドされている項目を変更してテーブル要素を絞り込むと、テーブルをクリアするときに異常な動作が発生します。

この質問の目的のために、私は最も簡単な表現を求めています。

リセットボタンをクリックすると、ボタンをクリックして1つのレコードのみをロードすると、これは私のTypescriptコードです。

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> 

は次のとおりです。

1. マイ新しくプッシュされたレコードは、現在の最上部に表示されています画面に記録する。
2. HTMLテーブルに1000 + 1レコードがあります。
3. 他のすべての（過去の）レコードは、2秒間に1つずつ削除されています。
4. ある時点で、元の1.000レコードはすべて削除され、期待どおりに新しいレコードが残されます。
   1. は、新たに追加：私は、レコードのHTML側に追加したすべての操作は、私は、次の操作のすべてのプロセスを減速している見たものから、さらに、ディスプレイの動作を遅くしているように見えます

   表示するプロパティ（たとえば、SEJCODの10倍を表示するようなものを複製する場合もあります）。

5. item.ADMDATの代わりに、たとえばvm.formatOwnDate(item.ADMDAT)の関数を追加します。
6. ui-sref="sejlabel({sejcod:'{{item.SEJCOD}}'})"をtr要素に追加します。

なぜこの現象は、表示データだけでなく、表示されているのか理解できません。

これは、動作のgifです：http://imgur.com/y74VHcf（これをクリックするとフルスクリーンになります）。

ng-repeatモデルを1.000から1レコードに更新すると、多くのジョブがあるように2秒間画面からレコードをパージするような奇妙な動作が発生しますが、1から1.000への更新は即座です。

Answer 1

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

Answer 2

は、問題を発見しました。 私は自分のテーブルがクリアされているときに自分のクラスを適用しているアプリケーションでngAnimateモジュールを持っています。 これらのクリップでは、CSSにフェード効果のトランジションが追加されます。

私はテーブルの上にngAnimateの動作を防止するために必要：

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

と

<table class="table no-animate">