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

问题描述

我有一个类的对象，这个对象里面有包含的项目对象对象调用的项目。

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

 ＆LT; D​​IV NG-IF =delivery_itemsNG重复=（K，cat_item）在delivery_items＆GT;
        ＆LT; D​​IV CLASS =项猫头＆GT;
            ＆LT; I类=发发箭头圈右＆GT;＆LT; / I＆GT; {{cat_item.item_category_name}}
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =项规则NG重复=，在cat_item.items项目＆GT;
            ＆LT; D​​IV CLASS =项-信息＆GT;
                {{item.item_name}}
                ＆LT; p =类项目，说明＆GT;＆LT; / P＆GT;
            ＆LT; / DIV＆GT;
            ＆LT; D​​IV CLASS =项目价格＆GT;
                €
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
 

但由于某些原因，它显示了一个错误

 错误：[ngRepeat：愚弄]在一个中继器不允许重复。使用轨道由前pression指定唯一键。中继器：在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] ['项目'] = [];
                如果（scope.items $）{                    angular.forEach（$ scope.items，功能（VAL，键）{
                        如果（v.item_category_id == val.item_category_id）{
                            $ scope.delivery_items [v.item_category_id] ['项目'] [关键] = VAL;
                        }
                    }）;
                }            }）;
        }
 

解决方案

您的问题是，因为数组（稀疏数组）的孔。我可以看到你的第一个项目数组的长度为39，但你真的没有数组中的39项。它是通过看你的快照非常明显（0，9，16,22等。）。 NG-重复附加默认情况下，跟踪ID（除非您设置跟踪），以各重复项目作为 $ hashkey 属性，但是当其中一个项目是不存在，它是从字面上未定义（项目[1] ），这样（未定义）将被设置为关键，但随后又得到另一个不确定的项目（项目[2] ），所以它抛出复制直放站错误。你可以速战速决由$指数做一个跟踪。

 ＆LT; D​​IV CLASS =项规则NG重复=项cat_item.items轨道由$指数＆GT;
 

但现在会显示空的项目规则部分。所以，你应该看看通过清理或正确设置这些值来修复阵列本身。检查您的阵列创建的部分。

---

的后阵列创建部分更新加入到这个问题的

您的问题在于在第二循环中（参见前注释如果）。

  angular.forEach（$ scope.items，功能（VAL，键）{
   //如果这里的条件不符合，你基本上跳过数组中的索引
   //记住密钥再presents您是通过遍历原来的数组的索引
   如果（v.item_category_id == val.item_category_id）{
         $ scope.delivery_items [v.item_category_id] ['项目'] [关键] = VAL;
    }
}）;
 

变更

  $ scope.delivery_items [v.item_category_id] ['项目'] [关键] = VAL;
 

使用的Array.push

  $ scope.delivery_items [v.item_category_id] ['项目']推（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-重复在重复不重复嵌套对象角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！