Question

我有一个与性能有关的奇怪的重复问题（或者至少我认为它与ng-repeat相关）。我有一个永远不会超过10个项目的项目列表，但无论有多少项目（即使只有一个项目），都会出现此问题。

当页面首次加载时，它闪电般快速。我甚至可以在列表中添加/更新项目，它几乎瞬间就会发生。但是一旦我尝试删除某个项目，就需要＆gt; 4秒让我展示一些代码。

removeItem(itemId) {
  this.ordersService.removeItem(
    this.order.order_id,
    itemId
  ).then(
    (item) => {
      let index = _.findIndex(this.items, {
        item_id: itemId
      });
      this.items.splice(index, 1);

      console.log('item removed');

      this.$timeout(function() {
        console.log('$timeout fired');
      });
    }, (response) => {
      this.message = response.data.message;
    }
  );
}

Template：

<li ng-click="OrderCtrl.removeItem(item.item_id)"
    ng-repeat="item in OrderCtrl.items track by item.item_id">

    <div class="row-wrapper">
        <span class="field">{{ item.item_number }}
        </span><span class="field">{{ item.model_number }}
        </span><span class="field">{{ item.model_title }}</span>
    </div>
</li>

这显然没有在它的当前状态下运行，但我认为你得到了图片。单击该行后，它会调用removeItem上的OrderCtrl方法。控制器从服务中触发Ajax请求，该请求在大约80ms内完成。 “item removed”和“$ timeout fired”几乎立即显示在我的控制台中。但是，从列表中实际可视地删除渲染元素大约需要4秒钟。

这里有什么东西可以说明我应该做的事吗？我是出于想法。是this.items.splice会以某种奇怪的方式影响手表吗？

嵌套角度Ng重复性能

0 个答案: