Question

在ProductMenuController中，我传递Id以从服务器获取输出。

示例：

当我通过Id时，我得到了正确的输出;
当我将Id作为2传递时，输出对象$$hashkey中缺失并且输出未显示。

我上传了图片，在输出一$$haskey出现，但在输出2中$$hashkey丢失了。

我收到此错误的原因和原因。

HTML代码：

<div class="col-md-4 col-sm-4 col-xs-12" ng-repeat="product in ProductMenuCtrl.products | filter: SearchName | filter: priceRange">
    <div class="" style="border: 1px solid #d8d8d8;">
        <div class="">
            <img src="{{product.ProductImage1}}" class="img-responsive" /> 
        </div>

        <div class="row" style="padding:0.5em">
            <div class="col-md-12">
                <div>
                    <a ui-sref="index.productDetails({productId:{{product.ProductsId}}})" class="product-name">{{product.ProductName}}</a>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="m-t text-left pull-left">
                                <a ui-sref="index.productDetails({productId:{{product.ProductsId}}})" class="btn btn-xs btn-outline btn-info">Info <i class="fa fa-info-circle"></i> </a>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="m-t text-right pull-right">
                                <span class="label label-danger" style="font-size:1em">MRR: <i class="fa fa-rupee"></i> {{product["MRR"]}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JS：

function ProductMenuController($http , $stateParams, $scope) { 
    var pmenu = this;
    var vm = this;

    $http({
        url: 'xxx/api/Product/ProductBySubCategoryId/getById?',
        method: 'GET',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        params: { subCategoryId: $stateParams.subCategoryId }
    }).then(function (response) {  
        pmenu.products = response.data; 
    });
}

JSON输出：

[{
    "ProductsId": 2013,
    "ProductName": "Hemodiaz",
    "ProductDescription": "Introduction ECG300G three channel ECG is such a kind of electrocardiograph .",
    "MRR": 35000,
    "ProductImage1": "w",
    "ProductImage2": null,
    "ProductImage3": null,
    "ProductImage4": null,
    "ProductImage5": null,
    "BriefProduct": "\tHemodiaz Lifesciences Pvt Ltd.\tModel No:Dr Diaz HDECG300G\tMachine Type:Resting/Diagnostic\tDisplay Type:LCD\tPower Supply:Both\tWarranty In Years:1 Yr\tWarranty Available:Brand Warranty\t12\tDisplay Size( In cm):3.5\tNo. of leads:12\tRechargable Battery:Yes\tSmart Features:Smart Phone intergation",
    "SubCategorysSubCategorysId": 0,
    "BrandBrandsId": 0,
    "Brand": null,
    "Bubbles": [],
    "ProductLikes": [],
    "ProductReviews": [],
    "SalesOrders": [],
    "SubCategory": null,
    "Rooms": [],
    "Suppliers": [],
    "BubbleGroupings": []
}, {
    "ProductsId": 2014,
    "ProductName": "s",
    "ProductDescription": "s",
    "MRR": 77,
    "ProductImage1": "7",
    "ProductImage2": null,
    "ProductImage3": null,
    "ProductImage4": null,
    "ProductImage5": null,
    "BriefProduct": "7",
    "SubCategorysSubCategorysId": 0,
    "BrandBrandsId": 0,
    "Brand": null,
    "Bubbles": [],
    "ProductLikes": [],
    "ProductReviews": [],
    "SalesOrders": [],
    "SubCategory": null,
    "Rooms": [],
    "Suppliers": [],
    "BubbleGroupings": []
}]

仅显示第一个产品。

Answer 1

嗯，我认为原因可能是无法呈现视图，但第一个呈现的是奇怪的，无论如何只是强制渲染使用$ scope.apply和$ scope.digest来强制对视图进行更新。

一些解释here

不好做，建议您阅读Todd Motto post

如果您需要使用$ scope，您可能需要收听一个事件或发出一个事件，或者观察模型更改。基于以上所述，将Model行为再次绑定到Controller不是一个好主意。使用Controller允许我们注入$ scope，但想想如何将相同的行为抽象到Factory中。 $ scope Object可以依赖注入Controller并在需要时使用。

首先将此pmenu.products = response.data;更改为$scope.products = response.data; 请将$scope.products = response.data;包裹在下面

  $scope.$apply(function () {
            $scope.products = response.data;
        });

然后更新您的html以使用范围而不是视图模型

试试吧，让我们看看魔术吧。希望它适合你

Angular对象中没有$$ hashkey

1 个答案: