javascript - AngularJS ngRepeat清除批量数据时显示缓慢

我在具有1.000条记录的ng-repeat元素上创建了带有tr的表。
当我通过更改ng-repeat绑定到的项目来过滤表格元素时，清除表格时会有奇怪的行为。

出于这个问题的目的，我将对它的最简单表达的呼吁降至最低。

这是我的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是即时的。

最佳答案

找到了问题。
我的应用程序中有ngAnimate模块，当我的表被清除时，该模块将应用他自己的类。
通过这些分类，它在CSS中添加了淡入淡出效果过渡。

我需要防止在表上执行ngAnimate行为：

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

和

<table class="table no-animate">

关于javascript - AngularJS ngRepeat清除批量数据时显示缓慢，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44303384/