angularjs - AngularJS 过滤器中的无限摘要循环

Question

我已经为 AngularJS 编写了这个自定义过滤器，但是当它运行时，我得到了无限摘要循环错误。为什么会发生这种情况，我该如何纠正？

angular.module("app", []).
filter('department', function(filterFilter) {
  return function(items, args) {
    var productMatches;
    var output = [];
    var count = 0;

    if (args.selectedDepartment.Id !== undefined && args.option) {
      for (let i = 0; i < items.length; i++) {

        productMatches = items[i].products.filter(function(el) {
          return el.Order__r.Department__r.Id === args.selectedDepartment.Id;
        });

        if (productMatches.length !== 0) {
          output[count] = {};
          output[count].products = productMatches;
          output[count].firstProduct = items[i].firstProduct;
          count++;
        }

      }
    }
    return output;
  };
}).

这是相关的 HTML:

<tr class='destination' ng-repeat-start='pickupAccount in pickupAccounts | department : {"selectedDepartment": selectedDepartment, "option": displayExclusive }'>
  <!-- td here -->
</tr>

displayExclusive是 bool 值。

Answer 1

I have written this custom filter for AngularJS, but when it runs, I get the infinite digest loop error.

请记住，过滤器应该返回相同对象结构的数组。当我们激活过滤器时，它会触发摘要循环，该循环将再次运行我们的过滤器。如果输出列表中的某些内容发生了变化 - 触发新的摘要循环等等。尝试 10 次后，它会抛出我们 Infinite Digest Loop异常(exception)

测试

这个空过滤器将起作用(100%)。实际上，我们在这里什么也不做，只是返回过滤器接收到的相同对象。

filter('department', function(filterFilter) {
  return function(items, args) {

    var output = items;

    return output;
  };
})

现在的主要思想是:写一些条件推送到 output来自输入列表 a.e. 的对象 items基于一些 if声明，a.e.

var output = [];

if (args.selectedDepartment.Id !== undefined && args.option) {
   angular.forEach(items, function(item) {
       if(<SOME CONDITION>) {
          output.push(item);
        }            
    });
}

通过这种方式，它也将起作用。

我们的案例:

我们有这个逻辑:

productMatches = items[i].products.filter(function(el) {
      return el.Order__r.Department__r.Id === args.selectedDepartment.Id;
    });

    if (productMatches.length !== 0) {
      output[count] = {};
      output[count].products = productMatches;
      output[count].firstProduct = items[i].firstProduct;
      count++;
    }

在这里，我们完全修改了已存储在 output 中的对象.
所以下一个摘要循环我们的 items会一次又一次地改变。

结论

filter的主要目的|是过滤列表而不是修改列表对象内容。

您编写的上述逻辑与数据操作有关，与过滤无关。 department过滤器返回相同长度的项目。

为了实现您的目标，您可以使用 lodash map或 underscorejs map例如。