Question

我有一个简单的管道：

export class MergePipe implements PipeTransform {
transform(first: any[], second: any[], order: Boolean): any {
    return order ? first.concat(second):second.concat(first);
}

我正在使用一个简单的按钮：<button *ngFor="let item of items | sort:suffix | filter:filterargs | merge:newItems:false"></button>。

然后使用newItems.push（values）将一些值推送到newItems但没有任何反应。如果我从* ngFor中删除管道，我会收到预期的更改。

我想我很想念数据绑定是如何工作的。

感谢您提供任何有用的信息。

Answer 1

如果修改其中一个阵列，Angulars更改检测将看不到更改，因此不会调用管道角度变化检测仅检查对象标识，但不检查对象内容。

您可以使管道不纯，或者您可以在每次修改Angular后创建管道副本以查看新阵列。

sort -t\t -k3

这可能会导致严重的性能问题，因为现在每次运行更改检测时都会调用管道。

@Pipe({ name: '...', pure: false})

修改后创建副本会导致角度变化检测以识别更改并调用管道。

另一种方法是使用虚拟参数;

someMethod() {
  this.newItems.push(someNewItem);
  this.newItems = this.newItems.slice();
}

counter:int = 0;
someMethod() {
  this.newItems.push(someNewItem);
  this.counter++;
}

这样，更改检测将检测参数的变化并调用管道。

Answer 2

如果数组引用没有改变，似乎Angular不会知道重新评估该管道。

如果我们看看他们对管道的讨论：

You add the hero into the heroes array. The reference to the array hasn't changed. It's the same array. That's all Angular cares about. From its perspective, same array, no change, no display update.

https://angular.io/docs/ts/latest/guide/pipes.html

您应该改为使用此代码：

newItems = newItems.concat(values)

这将更新引用并导致管道重新评估。

角度2：管道中的concat数组，不会丢失数据绑定

2 个答案: