如何在AngularJS中显示删除后返回的刷新的项目列表？答案

【问题标题】：How to display the returned refreshed list of items after deletion in AngularJS?如何在AngularJS中显示删除后返回的刷新的项目列表？
【发布时间】：2015-05-19 13:12:07
【问题描述】：

我正在学习 AngularJS 以及如何将它与 ASP.NET Web API 一起使用，我现在正在努力在经理删除一个产品后显示返回的刷新的产品列表。当他成功删除产品时，产品列表将在删除后立即更新。删除功能运行良好，但删除后，我收到以下错误消息：

我试图按照这个问题HERE中提到的答案，但似乎开发人员从Web API中的删除函数返回了一个与我的情况完全不同的状态。

这是 ProductRepository 类的代码：

public List<T_Product> GetAllProducts()
        {
            var query = from product in db.T_Product
                        select product ;
            return query.ToList();
        }

public List<T_Product> DeleteProduct(int productId)
        {
            var pro = (from product in db.T_Product
                       where product .ProductId == productId
                       select product ).SingleOrDefault();
            db.T_Product.DeleteObject(pro);
            db.SaveChanges();
            return GetAllProducts();
        }

这是Web API中删除功能的代码：

public HttpResponseMessage Delete(int id)
        {
            var products = productRepository.DeleteProduct(id);
            HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK, products);
            return response;
        }

这里是 AngularJS 控制器代码：

app.controller('productsController', [productsFactory', 'productFactory', function (productsFactory, productFactory) {
        var vm = this;

        vm.Products = productsFactory.query();

        // callback for ng-click 'deleteProduct':
        vm.deleteProduct = function (aId) {
            productFactory.delete({ id: aId });
            vm.Products = productsFactory.query();
        };
}]);

这里是 AngularJS 服务代码：

app.factory('productsFactory', function ($resource) {
    return $resource('/api/products', {}, {
        query: { method: 'GET', isArray: true },
        create: { method: 'POST' }
    })
});

app.factory('productFactory', function ($resource) {
    return $resource('/api/products/:id', {}, {
        show: { method: 'GET' },
        update: { method: 'PUT', params: { id: '@id' } },
        delete: { method: 'DELETE', params: { id: '@id' } }
    })
});

我在 IE 9 中使用 F12 调试并捕获了网络数据包，代码返回更新后的列表，但它没有显示在页面中。 为什么？

如何在删除操作成功后立即显示返回的更新产品列表？

【问题讨论】：

不是答案，但我认为您最好只从 Delete 操作返回状态代码，如果成功，您可以简单地从客户端模型中删除该项目。（对不起，如果我遗漏了什么）

标签： c# angularjs asp.net-web-api

【解决方案1】：

据我所知，问题与您链接的问题完全相同。 productFactory.delete({ id: aId }); 是异步调用，所以需要时间向服务器发送数据并取回数据。你应该把你想在删除发生后发生的代码放在删除的回调函数中：

// callback for ng-click 'deleteProduct':
vm.deleteProduct = function (aId) {
    productFactory.delete({ id: aId }, function() {
        vm.Products = productsFactory.query();
    });
};

这样可以确保在服务器上删除项目后查询功能会发生。

理想情况下，您不需要再次调用.query()，只需在本地删除该项目即可。这样您就不需要等待另一个服务器请求/响应。

【讨论】：

【解决方案2】：

我认为您应该在回调中设置 vm.Products 的值 - Angular 最初会解析异步值（因此，只需将 productsFactory.query 直接分配给 vm.Products 在创建控制器时确实有效，因为所有异步操作在渲染之前完成），但是在删除后刷新它不起作用 - 翻译你的代码，所以它都是回调快乐的：

app.controller('productsController', [productsFactory', 'productFactory', function (productsFactory, productFactory) {
    var vm = this;

    productsFactory.query(function (products) {
        vm.Products = products;
    });

    // callback for ng-click 'deleteProduct':
    vm.deleteProduct = function (aId) {
        productFactory.delete({ id: aId }, function() {
            productsFactory.query(function (products) {
                vm.Products = products;
            });
        });
    };
}]);

【讨论】：

【解决方案3】：

设置资源以接受数组响应

delete: { method: 'DELETE', params: { id: '@id' }, isArray: true }

或者使用回调中的值

vm.deleteProduct = function (aId) {
    productFactory.delete({ id: aId }, function(remainingProducts) {
        vm.Products = remainingProducts;
    });
};

或资源方法的承诺

vm.deleteProduct = function (aId) {
    vm.Products = productFactory.delete({ id: aId });
};

应该可以解决问题。

正如其他人所提到的，一旦删除调用返回（即在回调内部），您通常只需在本地删除项目。我倾向于立即删除该项目，然后在出现问题时重新添加它（通过提供第二个错误回调）。请记住，虽然该列表可能已经改变了（除非 UI 在 AJAX 调用期间以某种方式“锁定”）。

附带说明：productFactory 也与产品s 相关，因此您可能需要考虑合并这两个资源。有一个空的或没有id 将转到正确的服务器资源。

【讨论】：