UI更新中的数据延迟 - ng-repeat(ngAnimate问题)

Question

我有以下问题,我需要一些关于它的可能原因/解决方案的意见.

我有一张桌子,其身体含有一个ng-repeat

<tr data-ng-repeat="product in shoppingCart"> ... </tr>

每行都有一个删除按钮:

<td class="total"><i data-ng-click="removeProduct(product, $index)" class="icon-remove-circle"> </i></td>

和功能:

removeProduct: function (removedProduct, index) {
     var _this = this;
     _this.$scope.shoppingCart.splice(index, 1);

     // + DELETE API Request
 },

问题是,即使我不等待API请求响应并且模型中的数据立即更新(shoppingCart对象的长度和内容),更改也会在UI中出现显着延迟而不会立即显示应该.

编辑:我刚刚想通过从项目中删除角度动画(ngAnimate),问题就解决了.问题是我在项目中使用角度动画,我无法删除它.

Answer 1

如果我没记错的话，您正在做的就是从您的购物车列表中删除一个项目，甚至不检查删除 API 的响应。API 甚至可能会失败，尽管如此，该项目仍可能被删除。根据 API 响应执行删除，可能类似于 -

removeProduct: function (removedProduct, index) {
    var _this = this;
    $http.post('DELETE API').then(function(success) {
        _this.$scope.shoppingCart.splice(index, 1); 
    }, function(failure) {
        console.log("Error in deleting", failure)
    });
},

从删除 API 获得响应后，根据响应，您可以更新购物车（从购物车中删除商品）或引发错误。