javascript - Angular - 已达到 10 次 $digest() 迭代。创建数组深拷贝时中止

Question

我想在表头中创建带有过滤器的表。过滤器是每列中唯一值的列表。这是简化的代码:

<table>
  <tr>
       <th class="dropdown" ng-repeat="field in data.columns">
         <span>{{field.title}}</span>
         <ul class="dropdown-menu">
           <li ng-repeat="item in unique(data.items, field)"><checkbox> {{item.text}}</li>
         </ul>
       </th> 
  </tr>
  <tr ng-repeat="item in data.items"></tr>
</table>

我对过滤器和表使用相同的对象数组，但过滤器创建数组的副本并从重复的副本值中删除。这就是我的问题。

当我将数组复制为array.slice(0)时，删除的值不在过滤器中，而是在表中(数组包含对象)。我的问题出在引用中，所以我使用 deepcopy 作为 jQuery.extend(true, [], array) 和 Angular 抛出错误:

[$rootScope:infdig] 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations

我的数据如下所示:

[{id: 1, title: 'AAA', something: [{id: 1, text: "A"}]}, {id: 2, title: 'AAAA', something: [{id: 2, text: "AA"}]}]

问题出在属性上(array.slice(0) donť copy and $.extend copy but Angular get error)

感谢您的建议

Answer 1

您还没有发布过滤器的代码，所以我必须假设发生了什么。我认为您在制作副本之前没有检查列表的所有元素是否都是唯一的。这会导致过滤器每个摘要更改数据，从而触发无限数量的摘要 - 因此会出现错误。你的 list 永远不稳定。

要解决这个问题，请在过滤器的开头添加检查元素的唯一性，如果它们已经是唯一的(例如在过滤器的第一次通过之后)，则仅返回输入对象。这样模型就会稳定下来。