角度ng-repeat错误“不允许在转发器中重复。”

472

我正在定义一个自定义过滤器，如下所示：

<div class="idea item" ng-repeat="item in items" isoatom>    
    <div class="section comment clearfix" ng-repeat="comment in item.comments | range:1:2">
        ....
    </div>
</div>

如您所见，使用过滤器的ng-repeat嵌套在另一个ng-repeat中

过滤器的定义如下：

myapp.filter('range', function() {
    return function(input, min, max) {
        min = parseInt(min); //Make string input int
        max = parseInt(max);
        for (var i=min; i<max; i++)
            input.push(i);
        return input;
    };
});

我越来越：

错误：不允许在转发器中重复。中继器：在item.comments中发表评论| 范围：1：2 ngRepeatAction @ https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/an

angularjs  ng-repeat 
— 进餐
source

Answers:

955

该解决方案的实际描述如下：http : //www.anujgakhar.com/2013/06/15/duplicates-in-a-repeater-are-not-allowed-in-angularjs/

AngularJS不允许在ng-repeat指令中重复。这意味着，如果您尝试执行以下操作，将会收到错误消息。

// This code throws the error "Duplicates in a repeater are not allowed.
// Repeater: row in [1,1,1] key: number:1"
<div ng-repeat="row in [1,1,1]">

但是，稍微更改上面的代码以定义一个索引来确定唯一性，如下所示，它将使它再次工作。

// This will work
<div ng-repeat="row in [1,1,1] track by $index">

官方文档在这里：https : //docs.angularjs.org/error/ngRepeat/dupes

— 网路
source
48
我想提到的是，您可以应用任何自定义跟踪属性来定义唯一性，而不仅仅是$ index。由于在这种情况下，对象没有任何其他属性，因此可以正常工作。发生此错误的原因是angular使用字典将项的id作为键存储，将值作为DOM参考存储。从代码（angular.js中的第15402行）看来，它们是根据其键来缓存先前找到的DOM元素，以进行性能优化。由于他们需要唯一的密钥，因此当他们在15417行上发现重复的密钥时，就会显式抛出此错误
— devshorts
16
<div ng-repeat="row in [1,1,1,2,2] |filter: 2 track by $index" >“搜索过滤条件”必须在“按$ index跟踪”之前
— Zhe Hu
21
Yikes，Angular的设计毫无意义，令人讨厌。在开发和测试过程中错过这个问题非常非常容易，因为您的阵列从不包含重复项，而只是让您的应用程序在第一次暴露于重复状态时就在生产中爆炸。在不了解“禁止重复”限制之前，我已经构建了Angular应用。现在，我发现自己在回想，想知道是否在不知不觉中编写了损坏的代码。
— Mark Amery
由于这个原因，我们的应用程序爆炸了，我不是有角开发人员，$index变量是否存在于某处？
— 张昭
请注意，如果稍后更新数组元素，则需要注意的是，它不会重新编译DOM标签，而是显示陈旧的数据。您可以使用track by ($index + ':' + row)它，以便<ng-repeat>在数据更新时以及添加新元素时更新单个，而不会
— 引起重复
45

对于那些希望使用JSON并仍然遇到相同错误的人，请确保您解析数据：

$scope.customers = JSON.parse(data)
— 有用的蜜蜂
source
4
这对我不起作用，我希望在使用$ http服务后使用json，但是SyntaxError：Object.parse（本机）处出现意外令牌o
— aurelius 2015年
1
@Fergus很高兴这对您有用；但是，除非您已经知道，否则请确保查找JSON.parse和JSON.stringify之间的区别。
— 有用蜜蜂
2
疯。经过几个月的正确工作，Angular突然确定从$ http（）返回的JSON不再是JSON。明确地解析它为我们解决了这个问题。感谢您的疯狂建议。
— 埃里克·L.
12

我在我的项目中遇到一个问题，当时我正在使用$ index的ng-repeat track，但是当数据来自数据库时，产品没有得到反映。我的代码如下：

<div ng-repeat="product in productList.productList track by $index">
  <product info="product"></product>
 </div>

在上面的代码中，product是显示产品的单独指令。但是我知道，当我们从范围中传递数据时，$ index会导致问题。因此数据丢失和DOM无法更新。

我通过使用product.id作为ng-repeat中的键找到了解决方案，如下所示：

<div ng-repeat="product in productList.productList track by product.id">
  <product info="product"></product>
 </div>

但是，当多个产品具有相同的id时，以上代码再次失败并引发以下错误：

angular.js：11706错误：[ngRepeat：dupes]不允许在转发器中重复。使用“跟踪依据”表达式指定唯一键。直放站

所以最终我通过如下所示的ng-repeat动态唯一密钥解决了这个问题：

<div ng-repeat="product in productList.productList track by (product.id + $index)">
  <product info="product"></product>
 </div>

这解决了我的问题，希望对您有所帮助。

— 马希玛·阿格劳（Mahima Agrawal）
source
1
当然track by $index会比track by (product.id + $index)？一方面，它track by $index很简单；另一方面，您实际上并不能保证的值(product.id + $index)是唯一的。例如，如果您的数组以id5 的乘积开头，然后id是4 的乘积，则它们的值都(product.id + $index)将为5（第一个乘积为5 + 0，第二个乘积为4 + 1），您将仍然在重复器中出现重复项错误。
— Mark Amery
1
我同意$索引更简单，但是上述解决方案对我来说可以解决$ index所面临的所有问题。在我的情况下，product.id是字母数字，因此（product.id + $ index）在任何情况下都不能重复。因此，该解决方案的思想是，如果$ index在某种情况下引起任何问题，那么我们可以使用任何带有track的逻辑，通过该逻辑唯一地创建id。
— Mahima Agrawal
5

您打算如何使用“范围”过滤器？

这是我认为您要尝试执行的工作示例：http : //jsfiddle.net/evictor/hz4Ep/

HTML：

<div ng-app="manyminds" ng-controller="MainCtrl">
  <div class="idea item" ng-repeat="item in items" isoatom>    
    Item {{$index}}
    <div class="section comment clearfix" ng-repeat="comment in item.comments | range:1:2">
      Comment {{$index}}
      {{comment}}
    </div>
  </div>
</div>

JS：

angular.module('manyminds', [], function() {}).filter('range', function() {
    return function(input, min, max) {
        var range = [];
        min = parseInt(min); //Make string input int
        max = parseInt(max);
        for (var i=min; i<=max; i++)
            input[i] && range.push(input[i]);
        return range;
    };
});

function MainCtrl($scope)
{
    $scope.items = [
        {
            comments: [
                'comment 0 in item 0',
                'comment 1 in item 0'
            ]
        },
        {
            comments: [
                'comment 0 in item 1',
                'comment 1 in item 1',
                'comment 2 in item 1',
                'comment 3 in item 1'
            ]
        }
    ];
}
— 以西结·维克多（Ezekiel Victor）
source
1

如果偶然在使用SharePoint 2010时发生此错误，请执行以下操作：重命名.json文件扩展名，并确保更新restService路径。不需要其他“ $ index跟踪”。

幸运的是，我将此链接转发给了以下理由：

.json成为SP2010中重要的文件类型。SP2010包括某些Web服务终结点。这些文件的位置是14hive \ isapi文件夹。这些文件的扩展名是.json。这就是它给出这样一个错误的原因。

“只关心json文件的内容是json-而不是文件扩展名”

更改文件扩展名后，应全部设置。

— 罗里森（CR Rollyson）
source
0

以防万一这发生在其他人身上，我在这里记录了这个错误，因为我错误地将ng-model设置为与ng-repeat数组相同：

 <select ng-model="list_views">
     <option ng-selected="{{view == config.list_view}}"
         ng-repeat="view in list_views"
         value="{{view}}">
         {{view}}
     </option>
 </select>

代替：

<select ng-model="config.list_view">
     <option ng-selected="{{view == config.list_view}}"
         ng-repeat="view in list_views"
         value="{{view}}">
         {{view}}
     </option>
 </select>

我检查了数组，没有任何重复，只需仔细检查变量即可。

— 米格尔·苏亚雷斯（Miguel Suarez）
source
0

不允许在转发器中重复。使用“跟踪依据”表达式指定唯一键。

Repeater: {0}, Duplicate key: {1}, Duplicate value: {2}

例

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="angular.js"></script>

</head>
<body>
    <div ng-app="myApp" ng-controller="personController">
        <table>
            <tr> <th>First Name</th> <th>Last Name</th> </tr>
            <tr ng-repeat="person in people track by $index">
                <td>{{person.firstName}}</td>
                <td>{{person.lastName}}</td>
                <td><input type="button" value="Select" ng-click="showDetails($index)" /></td>
            </tr>

        </table> <hr />
        <table>
            <tr ng-repeat="person1 in items track by $index">
                <td>{{person1.firstName}}</td>
                <td>{{person1.lastName}}</td>
            </tr>
        </table>
        <span>   {{sayHello()}}</span>
    </div>
    <script> var myApp = angular.module("myApp", []);
        myApp.controller("personController", ['$scope', function ($scope)
        { 
            $scope.people = [{ firstName: "F1", lastName: "L1" },
                { firstName: "F2", lastName: "L2" }, 
                { firstName: "F3", lastName: "L3" }, 
                { firstName: "F4", lastName: "L4" }, 
                { firstName: "F5", lastName: "L5" }]
            $scope.items = [];
            $scope.selectedPerson = $scope.people[0];
            $scope.showDetails = function (ind) 
            { 
                $scope.selectedPerson = $scope.people[ind];
                $scope.items.push($scope.selectedPerson);
            }
            $scope.sayHello = function ()
            {
                return $scope.items.firstName;
            }
        }]) </script>
</body>
</html>
— Yogesh Sharma
source
2
请声明您发布的任何链接的所有从属关系
— Draken
-1

我的JSON回答是这样的：

{"items": 
  &nbsp;[
    &nbsp;&nbsp;{
      "index": 1,
      "name": "Samantha",
      "rarity": "Scarborough",
      "email": "maureen@sykes.mk"
    },
    &nbsp;&nbsp;{
      "index": 2,
      "name": "Amanda",
      "rarity": "Vick",
      "email": "jessica@livingston.mv"
    }]
}

所以，我曾经ng-repeat = "item in variables.items" 展示过它。

— 杰伊
source
-1

不允许在转发器中重复。使用“跟踪依据”表达式指定唯一键。中继器：mydt中的详细信息，重复键：字符串：，重复值：

我遇到此错误是因为我在php api部分中输入了错误的数据库名称 ……

因此，当您从数据库库中获取数据时，也可能会发生此错误，该数据库的名称写得不正确。

— 维沙尔·索兰基（Vishal Solanki）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.