重复中的 ng-repeat 不重复嵌套对象角度 [英] ng-repeat in repeat does not repeat nested object angular

问题描述

我有一个带有类别的对象，在这个对象中有一个叫做 items 的对象，它包含带有项目的对象.

现在我想重复显示这样的项目:

 
<div class="item-cat-header"><i class="fa fa-arrow-circle-right"></i>{{cat_item.item_category_name}}
<div class="item-rule" ng-repeat="item in cat_item.items"><div class="item-info">{{item.item_name}}<p class="item-desc"></p>

<div class="item-price">欧元

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

错误:[ngRepeat:dupes] 不允许在转发器中重复.使用track by"表达式来指定唯一键.中继器:cat_item.items 中的项目，重复键:未定义:未定义，重复值:未定义

json 对象如下所示:

我做错了什么?

数组创建部分:

//设置菜单列表如果($scope.categories_norm){$scope.delivery_items = {};//获取类别angular.forEach(data.item_categories.normal_categories，函数(v，k){//推送类别$scope.delivery_items[v.item_category_id] = v;//创建空的分类对象$scope.delivery_items[v.item_category_id]['items'] = [];如果($scope.items){angular.forEach($scope.items, function (val, key) {如果(v.item_category_id == val.item_category_id){$scope.delivery_items[v.item_category_id]['items'][key] = val;}});}});}

解决方案

您的问题是由于数组(稀疏数组)中存在漏洞.我可以看到您的第一个 item 数组的长度为 39，但数组中确实没有 39 个项目.通过查看您的快照(0、9、16、22 等)可以很明显地看到它.ng-repeat 默认情况下(除非您设置 track by)作为 $hashkey 属性附加到每个重复项的跟踪 ID，但是当其中一项不可用，它实际上是 undefined (items[1])，因此 (undefined) 将被设置为键，但是然后它再次获得另一个未定义的项目(items[2])，因此它在转发器错误中抛出重复.您可以通过执行 track by $index 来快速修复.

但现在它会显示空的 item-rule 部分.因此，您应该通过清理或正确设置值来修复数组本身.检查您的数组创建部分.

<小时>

在问题中添加数组创建部分后更新

您的问题出在第二个循环中(请参阅 if 之前的注释).

angular.forEach($scope.items, function (val, key) {//如果不满足这里的条件，你基本上跳过数组中的那个索引//记住键代表你正在迭代的原始数组的索引如果(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

$scope.delivery_items[v.item_category_id]['items'].push(val);

I have a object with categories, inside this object there is a object called items which contain objects with items.

now i want to do in a repeat to display the items like this:

    <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>

but for some reason it shows a error

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

the json object looks like this:

what am i doing wrong?

EDIT:

the array creation part:

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

            });
        }

解决方案

Your issue is because of holes in the array (sparse array). I can see your first item array is of length 39 but you really do not have 39 items in the array. It is quite visible by looking at your snapshot (0, 9, 16,22 etc..). ng-repeat attaches a tracking id by default (unless you set a track by) to each repeated item as a $hashkey property, but when one of the items is not available it is literally undefined (items[1]) so that (undefined) will be set as key, but then again it gets another undefined item (items[2]) so it throws duplicate in repeater error. You can quick fix by doing a track by $index.

 <div class="item-rule" ng-repeat="item in cat_item.items track by $index">

But now it will show empty item-rule sections. So you should look to fix the array itself by cleaning up or setting the values properly. Check your array creation part.

---

Update after array creation part was added into the question

Your problem lies in the second loop (see comment before 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;
    }
});

change

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

to use array.push

$scope.delivery_items[v.item_category_id]['items'].push(val);

这篇关于重复中的 ng-repeat 不重复嵌套对象角度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！