错误：[ngRepeat：dupes]在一个看似有效的对象上

11 浏览
0 Comments

错误：[ngRepeat：dupes]在一个看似有效的对象上

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

    ....

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

该过滤器的定义如下：

myapp.filter('range', function() {
    return function(input, min, max) {
        min = parseInt(min); //将字符串输入转换为整数
        max = parseInt(max);
        for (var i=min; i



我得到了以下错误：




错误：重复项在重复器中是不允许的。重复器：comment in item.comments | range:1:2 ngRepeatAction@https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/an
0

3 答案

0 Comments

在这个项目中，我在使用ng-repeat track by $index时遇到了一个问题，即当数据来自数据库时，产品并没有得到更新。我的代码如下：

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

在上面的代码中，product是一个单独的指令，用于显示产品。但是我发现当我们从作用域传递数据时，$index会导致问题。因此数据丢失，DOM无法更新。

我通过在ng-repeat中使用product.id作为键来解决了这个问题，如下所示：

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

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

angular.js:11706 Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater

因此，最后我通过创建动态唯一键来解决了这个问题，如下所示：

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

这解决了我的问题，希望这能帮助到你们。

当然，track by $index比track by (product.id + $index)更好，对吗？首先，track by $index更简单，其次，你可能无法保证(product.id + $index)的值是唯一的。例如，如果数组以一个id为5的产品开头，然后是一个id为4的产品，它们的(product.id + $index)的值都将是5（第一个产品的5 + 0，第二个产品的4 + 1），你仍然会收到“重复项在重复器中是不允许的”错误。

我同意$ index更简单，但上述解决方案对我来说可以解决我遇到的所有问题。在我的情况下，product.id是字母数字，因此(product.id + $index)在任何情况下都不会重复。因此，这个解决方案的思路是，如果$ index在某种情况下导致任何问题，那么我们可以使用任何逻辑和track by来创建唯一的id。

0
0 Comments

在AngularJS中，ng-repeat指令不允许重复项。这意味着如果你尝试以下操作，将会出现错误。

// 这段代码会抛出错误："Duplicates in a repeater are not allowed. Repeater: row in [1,1,1] key: number:1"

然而，稍微改变上面的代码，定义一个索引来确定唯一性，就可以解决这个问题。

// 这段代码可以正常工作

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

我想提一下，你可以应用任何自定义的跟踪属性来定义唯一性，不仅仅是$index。因为在这种情况下，对象没有其他属性，所以这种方法可以正常工作。产生这个错误的原因是Angular使用字典以缓存已找到的DOM元素，以性能优化的目的。它使用项目的ID作为键，并将DOM引用作为值。在代码（angular.js的第15402行）中，它看起来像是通过键缓存以前找到的DOM元素。由于它们需要唯一的键，当它们发现重复键时，会显式抛出此错误（第15417行）。

Yikes，Angular的设计真是毫无意义。在开发和测试过程中很容易忽略这个问题，因为数组中从未包含重复项，但是当应用程序首次遇到重复项时，它会在生产环境中出现问题。我以前在不知道"no dupes"限制的情况下构建过Angular应用程序，现在我回想起来，想知道我是否无意中编写了错误的代码。

我们的应用程序由于这个原因而崩溃，而我不是Angular开发人员，$index变量是在哪里？

注意，如果稍后更新数组元素，它不会重新编译DOM标签，而是显示过时的数据。你可以使用track by ($index + ':' + row)，这样当数据更新时，它会更新单个<ng-repeat>，同时在添加新元素时不会出现重复项。

如果数组项是对象，那么是什么使每个对象唯一？

我也想知道这个问题的答案。即使使用相同的对象（参见[此演示](https://stackblitz.com/edit/angularjs-cbgkdi?file=home/home.controller.js)），AngularJS也不会将它们视为重复项。

其实，我只是使用track by index解决了这个问题。

注意，track by $index存在一些[重大缺陷](https://stackoverflow.com/a/45723356/4028303)，请注意。

0
0 Comments

(Error: [ngRepeat:dupes] on a seemingly valid object)这个问题的出现原因是Angular认为返回的JSON数据不是有效的JSON格式。解决方法是将返回的数据进行显式解析。

对于那些期望获得JSON数据但仍然遇到相同错误的人来说，确保解析你的数据：

$scope.customers = JSON.parse(data)

对我来说这个方法不起作用，我期望得到JSON数据，但在使用$http服务之后出现了SyntaxError: Unexpected token o at Object.parse (native)的错误。

很高兴这个方法对你起作用，但是请确保区分JSON.parse和JSON.stringify之间的区别，除非你已经了解。

真是太疯狂了。几个月以来一直正常工作的Angular突然决定返回的JSON数据不再是JSON格式。显式解析解决了我们的问题。感谢这个疯狂的建议。

以上就是(Error: [ngRepeat:dupes] on a seemingly valid object)这个问题的出现原因以及解决方法。

0