filter - AngularDart 自定义过滤器 call() 方法需要幂等吗？

Question

Angular Dart 教程的主要运行示例是一个Recipe Book 应用。练习结束Chapter 5 on filters and services建议尝试“创建一个[自定义]过滤器，将配方中[列出的每种成分]的所有数量相乘”，从而允许“用户将配方加倍、三倍或四倍”。”例如。 “1/2 杯面粉”的成分加倍后将变成“1 杯面粉”。

我编写了这样一个自定义过滤器:它接受一个成分列表(由数量和描述组成)并返回新的成分的新列表(数量增加)，但我收到以下错误:

5 $digest() iterations reached. Aborting!

我的问题是:AngularDart 自定义过滤器 call() 方法所需和/或允许的行为是什么？例如，显然允许从其输入列表中删除(即过滤)元素，但它也可以添加新的或替换的元素吗？ Dart angular.core NgFilter文档只是说“过滤器是一个具有调用方法的类”。我还没有找到更多细节。

从 this AngularJS post 的答案推断，似乎重复调用 call() 应该(最终？)产生“相同的结果”。如果是这样，这将是一个合理的限制。

产生“相同的结果”可能意味着 call() 需要幂等，但在 Dart 的情况下，这种幂等应该相对于 = =(对象等价)而不是identical()(对象标识)，恕我直言。我使用以下小示例进行了一些测试来说明问题:

• main.dart

    import 'package:angular/angular.dart';

    class A { }

    @NgFilter(name:'myFilter') class MutatingCustomFilter {
      final A _a = new A();
      call(List list) => new List.from(list)..add(_a); // runs ok.
      // call(List list) => new List.from(list)..add(new A()); // gives error
    }

    class MyAppModule extends Module {
      MyAppModule() { type(MutatingCustomFilter); }
    }

    main() => ngBootstrap(module: new MyAppModule());

• index.html 摘录

    <ul>
      <li ng-repeat="x in [1,2,3] | myFilter">{{x}}</li>
    </ul>

如果我将A类的主体更改为

@override bool operator==(other) => true;
@override int get hashCode => 1;

这使得 A 的所有实例都被视为 ==，然后是 main.dart 中 call() 的第二个实现(带有add(new A())) 仍然给出错误(尽管是不同的错误)。

我可以了解如何在不使用自定义过滤器的情况下解决教程练习，但我试图不放弃寻找可按要求工作的过滤器的挑战。我是 Angular 的新手，决定加入 AngularDart，因此任何帮助解释 call() 的各种风格的效果，或查找 call( 的预期行为的文档) )，(或者如果您认为根本无法编写这样的自定义过滤器，请告诉我!)将不胜感激。

Answer 1

迭代次数过多

当 Angular 检测到模型发生变化时，它会执行 react 函数。 react 函数可以进一步改变模型。这将使模型处于不一致的状态。为此，我们重新运行更改检测，这可以进一步创建更多更改。因此，我们不断重新运行更改，直到模型稳定为止。但是在放弃之前我们应该重新运行变更检测多少次？默认为 5 次。如果模型在 5 次迭代后仍不稳定，我们就放弃。这就是您的情况。

变化检测

对象什么时候改变的？可以使用相同或==(等于)。每个都可以提出很好的论据，但我们选择使用相同的，因为它快速且一致。使用 == (等于)很棘手，并且会对更改检测算法产生负面影响。

过滤器和数组

当操作数组的过滤器执行时，它别无选择，只能创建数组的新实例。这会破坏相同的情况，但幸运的是它被输入到 ng-repeat 中，它使用自己的算法进行数组内容检测而不是数组检测。虽然数组在两次运行之间不必相同，但其内容必须相同。否则 ng-repeat 无法区分插入和更改之间的区别，而它需要执行正确的动画。

您的代码

您的过滤器的问题是它会在摘要循环的每次迭代中创建新实例。这些新实例会阻止模型稳定，从而导致错误。 (有计划解决这个问题，但需要几周时间才能实现。)

解决方案

您的解决方案正在尝试创建一个过滤器，该过滤器消耗整个数组，然后尝试为 ng-repeat 创建一个新数组。一个不同的(首选)解决方案是按原样保留 ng-repeat 迭代，而是将过滤器放置在创建数量的绑定(bind)上并将其应用到那里。

<span>{{recipe.qty | myFilter:multiply}}</span>