Question

我有一个带有类别的对象，在这个对象中有一个名为items的对象，它包含带有项目的对象。

现在我想重复一次显示这样的项目：

    <div ng-if="delivery_items" ng-repeat="(k, cat_item) in delivery_items">
        <div class="item-cat-header">
            <i class="fa fa-arrow-circle-right"></i> {{cat_item.item_category_name}}
        </div>
        <div class="item-rule" ng-repeat="item in cat_item.items">
            <div class="item-info">
                {{item.item_name}}
                <p class="item-desc"></p>
            </div>
            <div class="item-price">
                €
            </div>
        </div>
    </div>

但由于某种原因，它显示错误

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: item in cat_item.items, Duplicate key: undefined:undefined, Duplicate value: undefined

json对象如下所示： json object

我做错了什么？

编辑：

数组创建部分：

            //set menu list
        if ($scope.categories_norm) {
            $scope.delivery_items = {};

            //get categories
            angular.forEach(data.item_categories.normal_categories, function (v, k) {
                //push categories
                $scope.delivery_items[v.item_category_id] = v; //create empty catagory object
                $scope.delivery_items[v.item_category_id]['items'] = [];


                if ($scope.items) {

                    angular.forEach($scope.items, function (val, key) {
                        if (v.item_category_id == val.item_category_id) {
                            $scope.delivery_items[v.item_category_id]['items'][key] = val;
                        }
                    });
                }

            });
        }

Answer 1

您的问题是因为数组中的漏洞（稀疏数组）。我可以看到你的第一个item数组长度为39，但你在数组中确实没有39个项目。通过查看快照（0,9,16,22等等）可以看到它。 ng-repeat默认情况下会将跟踪ID（除非您将track by）附加到每个重复的项目作为$hashkey属性，但当其中一个项目不可用时，它实际上是{{1 }（undefined）这样（items[1]）将被设置为键，但是它再次获得另一个未定义的项（undefined），因此它会在转发器错误中引发重复。您可以通过items[2]快速修复。

track by $index

但现在它会显示空的<div class="item-rule" ng-repeat="item in cat_item.items track by $index">部分。因此，您应该通过正确清理或设置值来修复数组本身。检查阵列创建部分。

数组创建部分后的更新已添加到问题

中

您的问题在于第二个循环（请参阅item-rule之前的评论）。

if

更改

angular.forEach($scope.items, function (val, key) {
   //If the condition here is not met you basically skip that index in the array
   //Remember key represents index of the original array you are iterating through
   if (v.item_category_id == val.item_category_id) {
         $scope.delivery_items[v.item_category_id]['items'][key] = val;
    }
});

使用$scope.delivery_items[v.item_category_id]['items'][key] = val;

array.push

Answer 2

<div class="item-rule" ng-repeat="(key, item) in cat_item.items track by key" ng-if="item">

也就是说，如果出于某种原因，你必须以角度在一个稀疏阵列周围工作，而不是首先重新索引它。

重复中的ng-repeat不会重复嵌套对象的角度

2 个答案: