angularjs – 来自UI更新的数据延迟 – ng-repeat(ngAnimate问题

发布时间：2020-12-17 18:04:20 所属栏目：安全来源：网络整理

导读：我有以下问题,我需要一些关于它的可能原因/解决方案的意见. 我有一张桌子,其身体含有一个ng-repeat tr data-ng-repeat="product in shoppingCart" ... /tr 每行都有一个删除按钮： td class="total"i data-ng-click="removeProduct(product,$index)" class="

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

我有一张桌子,其身体含有一个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),问题就解决了.问题是我在项目中使用角度动画,我无法删除它.

解决方法

如果我没有错,你正在做的是从shoppingCart列表中删除一个项目,甚至没有检查你的删除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获得响应后,根据响应,您可以更新购物车(从购物车中删除项目)或抛出错误.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!