在Angular2中过滤NgFor

Question

我想显示数组的一些元素。 如下面的代码所演示的那样，当使用管道过滤数组时，更新数组并不会反映到DOM中。

import {Component} from 'angular2/core' 
import {Pipe, PipeTransform} from 'angular2/core'; 

@Pipe({name: 'myPipe'}) 
export class MyPipe implements PipeTransform { 
    transform(numbers) { 
     return numbers.filter(n => n > 2); 
    } 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <button (click)="change()">Change 3 to 10</button> 
    <ul> <li *ngFor="#n of numbers | myPipe">{{n}}</li> </ul> 
    <ul> <li *ngFor="#n of numbers">{{n}}</li> </ul> 
    `, 
    pipes: [MyPipe] 
}) 
export class App { 
    numbers = [1, 2, 3, 4]; 

    change() { 
    this.numbers[2] = 10; 
    } 
} 

https://plnkr.co/edit/1oGW1DPgLJAJsj3vC1b1?p=preview

这个问题似乎发生，因为滤镜阵列的方法，使一个新的数组。 如何在不破坏数据绑定的情况下过滤数组？

Answer 1

您需要更新数组本身的引用。我的意思是对象内的更新不会触发更改检测，但是如果更新整个参考，它会执行更新。

你可以更新您的change方法一样，代码：

change() { 
    this.numbers[2] = 10; 
    this.numbers = this.numbers.slice(); 
} 

这里是更新plunkr：https://plnkr.co/edit/g3263HnWxkDI3KIhbou4?p=preview。

这里是另一种答案，可以帮助你：

• Angular 2: Trouble with Custom Components

希望它可以帮助你， 蒂埃里