Question

我的应用程序中有一个ng-repeat并观察到以下行为：当替换ng-repeat后面的数据结构时，ng-repeat会使一些元素在短时间内翻倍，然后恢复到正常状态。这会让我的用户感到困惑，看起来很糟糕。什么可能导致这种行为？

这是一段视频：我点击“Favourisieren”并观看左侧边栏中的项目更改。鼠标光标不可见。

https://nimbus.everhelper.me/client/notes/share/video/317494/o1sARUDmxVOzUZoD4LhyJ0PxsUMTC6cn/none/wz61446123052707/video.webw

这是有问题的ng-repeat的源代码。 user.favourited_term的数据结构只是一个简单的对象数组。

        <li ng-if='user && user.favourited_terms' ng-repeat="termOrCategory in user.favourited_terms">
            <a ng-click="handleMenuClick($event)">
                <i class="fa fa-star-o"></i>
                <span class="menu-item">
                    <h2>{{termOrCategory.term.name}}</h2>
                </span>
            </a>
        </li>

Answer 1

我找到了重复数据的修复程序。由于我的代码中没有跟踪语句，因此angular会自动按数组索引跟踪数组项。插入新项目时，这不起作用。

通过插入 track by 语句可以轻松解决问题，该语句唯一地标识列表中的对象，如id。在我的情况下，这有点复杂，通常只是e的轨道。 G。 yourObjectName.id就够了

ng-repeat="termOrCategory in user.favourited_terms track by termOrCategory.term.id + termOrCategory.is_category"

更换阵列时角度ng重复搞乱

1 个答案: