Question

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

enter image description here

我试着按照这个问题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调试并捕获了网络数据包，代码返回更新后的列表，但未在页面中显示。的为什么吗

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

Answer 1

据我所知，问题与您关联的问题完全相同。 var url = "http://localhost/webproject/products.html?product=Apple%20iPhone%206%20With%20FaceTime%20class=" var split1 = url.split('=')[1] var split2 = split1.split('%20') split2.pop() alert(split2.join(' '))是一个异步调用，因此需要时间将数据发送到服务器并获取数据。你应该在delete的回调函数中删除你想要发生的代码：

productFactory.delete({ id: aId });

通过这种方式，您可以确保在服务器上删除项目后将发生查询功能。

理想情况下，您不应该再次呼叫// callback for ng-click 'deleteProduct': vm.deleteProduct = function (aId) { productFactory.delete({ id: aId }, function() { vm.Products = productsFactory.query(); }); };，并且只会在本地删除该项目。这样您就不需要等待另一个服务器请求/响应。

Answer 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;
            });
        });
    };
}]);

Answer 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 });
};

应该这样做。

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

作为旁注：productFactory也与产品 s 有关，因此您可能需要考虑合并这两种资源。空或无id将转到正确的服务器资源。

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

3 个答案: