AngularDart自定义过滤器调用()方法需要是幂等的吗？

Question

Angular Dart教程的主要运行示例是Recipe Book应用程序.关于过滤器和服务的第5章末尾的练习建议尝试" 创建一个[自定义]过滤器,将所有[列出的每种成分]的数量相乘 ",从而允许" 用户加倍,三倍,或者食谱四倍." 例如,当加倍时,"1/2杯面粉"的成分将成为"1杯面粉".

我编写了这样一个自定义过滤器:它需要一个Ingredients 列表(由a quantity和a 组成description)并返回一个新的Ingredients 列表(增加数量),但是我收到以下错误:

5 $digest() iterations reached. Aborting!

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

从AngularJS帖子的答案推断,似乎重复调用call()should(最终？)会产生"相同的结果".如果是这样,这将是一个合理的约束.

产生"相同的结果"可能意味着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>

如果我改变的身体class A是

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

这使得所有实例都A被考虑==,然后call()在main.dart(带有一个add(new A()))的第二个实现 仍然给出一个错误(虽然是一个不同的).

我可以看到如何在不使用自定义过滤器的情况下解决教程练习,但我试图不放弃寻找可按要求工作的过滤器的挑战.我是Angular的新手并且决定加入AngularDart,所以任何帮助解释各种风格的影响call(),或者找到预期行为的文档call(),(或者让我知道你认为这样的自定义过滤器根本不能写的!)将不胜感激.

Answer 1

迭代次数过多

当角度检测到模型中的变化时,它执行反应功能.反应函数可以进一步改变模型.这会使模型处于不一致状态.出于这个原因,我们重新运行更改检测,这可以进一步创建更多更改.因此,我们会继续重新运行更改,直到模型稳定下来.但是在放弃之前我们应该多少次重新检查变化检测？默认情况下是5次.如果模型在5次迭代后没有稳定,我们放弃.这就是你的情况.

变更检测

什么时候改变了对象？一个人可以使用identical或==(等于).可以为每个人提供良好的论据,但我们选择使用identical它,因为它快速且一致.使用==(等于)是棘手的,它会对变化检测算法产生负面影响.

过滤器和数组

当一个操作数组的过滤器执行它时别无选择,只能创建一个新的数组实例.这打破了相同的,但幸运的是,ng-repeat它使用自己的算法进行数组内容检测,而不是阵列检测.虽然阵列在运行之间不必相同,但其内容必须是.否则ng-repeat无法分辨插入和更改之间的区别,它需要做适当的动画.

你的代码

过滤器的问题是它在摘要循环的每次迭代中创建新实例.这些新实例会阻止模型稳定,从而防止错误.(有计划解决这个问题,但是在我们到达那里之前几周.)

解

您的解决方案正在尝试创建一个使用整个阵列的过滤器,然后尝试创建一个新阵列ng-repeat.一个不同的(首选)解决方案是按ng-repeat原样保留迭代,而是将过滤器放在创建数量的绑定上并将其应用于那里.

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