Фильтрация NgFor в Angular2

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

Надеется, что это помогает вам, Тьерри