angular - 检查后错误值已更改(Angular2 中的有状态管道)

Question

我有一个简单的 Pipe 可以过滤一组学生。这是代码 ( Plnkr )

import {Pipe} from 'angular2/core';

@Pipe({
  name: 'sortByName',
  pure: false
})
export class SortByNamePipe {
  temp = [];
  // i = 0;
  transform (value, [queryString]) {
    // console.log(this.i++);
    // console.log(value, queryString);

    // This does not work
    this.temp = value.filter((student)=>(student)=>student.name.includes(queryString)))
    return value.map(function(val){ return val.name.toUpperCase()});

    // This works
    // this.temp.length = 0;
    // this.temp.push(...value.filter((student)=>student.name.includes(queryString)))        
    // return this.temp;
  }
}

如您在 Plnkr 中所见，Angular 使用第一种方法抛出错误。

EXCEPTION: Expression 'students | sortByName:queryElem.value  in HelloWorld@7:6' has changed after it was checked. Previous value: 'SON,DAVID'. Current value: 'SON,DAVID' in [students | sortByName:queryElem.value  in HelloWorld@7:6]

为什么？

Answer 1

与无状态(或纯)管道相比，Angular 无法对有状态管道进行某些优化。例如，如果管道是无状态的，则过滤器的输出仅取决于其输入(left | pipe:args)。只要“left”或“args”没有改变，输出就不会改变。这允许 AngularJS 在输入未更改时安全地跳过管道的执行。

对于有状态管道，管道的输出可以改变，即使对于相同的输入也是如此。

错误告诉您数组引用已更改，在第一轮更改检测之后检查之后:

... has changed after it was checked. 
Previous value: 'SON,DAVID'. Current value: 'SON,DAVID'...

我修改了您的第一个示例以保留数组引用:

// This now works
var $this = this; // save this
$this.temp.length = 0;
var tmp = value.filter((student)=>student.name.includes(queryString));
tmp.forEach(function (val) {$this.temp.push(val);});
return $this.temp;

[编辑]

正如 Mark 所指出的，该错误仅发生在开发模式期间。如果您更改为生产模式，错误就会消失，并且代码会按预期工作。

[解释]

显然，在开发模式下，angular 将检查您的绑定(bind)两次以确保它们没有发生变化。

https://github.com/angular/angular/issues/6006

https://github.com/angular/angular/issues/6005

问题是当一个绑定(bind)在第一轮变化检测后发生变化时，它不会触发新一轮的变化检测。这是不可取的，因为在未来的某个轮次更改检测之前，绑定(bind)不会被更新。为确保不会发生这种情况，Angular 在开发模式下检查绑定(bind)两次，并在检测到更改时引发运行时错误。

Updated Plunkr