检查后错误值已更改（Angular2中的状态管道）

Question

我有一个过滤学生数组的简单管道。这是代码 (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 会检查你的绑定两次以确保它们没有改变。

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

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

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

Updated Plunkr