AngularJS 应用程序没有调用正确的 webapi 方法并且没有显示正确的 html 页面

Question

您好，我基本上是在创建一个进行 WebAPI 调用的 AngularJS 应用程序。我创建了一个屏幕，在 WebApi Call 的帮助下列出了所有产品。我创建了一个超链接栏，点击后应该会跳转到详细信息页面。每当我单击超链接时，都会调用原始 WebAPI Get 方法，而不是理想情况下应该为详细信息页面调用的方法。我不确定问题是什么。我的路由绝对没问题。我所有的路由状态都定义正确。下面是代码。

app.js 中的代码。这是定义我的路由状态的文件。

  .state("productList", {
                            url: "/products",
                            templateUrl: "/products/productListView.html",
                            controller: "ProductListCtrl as vm"
                        })

 .state("productDetail", {
                            url: "/products/:Id",
                            templateUrl: "/products/productDetailView.html",
                            controller: "ProductDetailCtrl as vm",
                            resolve: {
                                productResource: "productResource",
                                product: function(productResource, $stateParams) {
                                    var productId = $stateParams.Id;
                                    return productResource.get({ productId: productId }).$promise;
                                }
                            }
                        });

productResource.js 文件

(function () {

    angular
        .module("common.services")
        .factory("productResource",
        ["$resource", productResource]);

    function productResource($resource) {
        return $resource("/api/products/:id",
            {

                query: {
                    method: 'GET',
                    isArray: true
                }
            });
    }
}());

ProductController.cs 文件中的 webAPI 方法

 public class ProductsController : ApiController
    {
        private IProductProvider _productProvider;

        public ProductsController(IProductProvider productProvider)
        {
            this._productProvider = productProvider;
        }

        // GET: Porducts
        public IEnumerable<Products> Get()
        {
           return _productProvider.GetProductData();
        }

        public Products Get(int id)
        {
            var product = _productProvider.GetProductData();

            var products = product.FirstOrDefault((p) => p.Id == id);
            return products;
        }
    }

谁能告诉我问题是什么？理想情况下，我需要的是当用户单击超链接列时，productDetails 状态应该生效并且应该显示 productDetailView.html。还应调用公共 Products Get(int id) WebApi 方法。

Answer 1

你的路由参数定义为id:

$resource("/api/products/:id",
        {

            query: {
                method: 'GET',
                isArray: true
            }
        });

但是你传递了一个以productId 为键的对象

productResource.get({ productId: productId })

把参数对象改成这样：

productResource.get({ id: productId })

如果您需要调试 URI 相关问题，请务必检查您的浏览器控制台是否有任何 HTTP 响应错误。