dynamisch zu aktualisieren [geprüft] in Angular2

Question

componentA.ts:

@Input() array; 

<input type="checkbox" [checked]="array | contains: value"/> 
<label>{{array.length}}</label> 

componentB.ts:

@Component({ 
    selector: 'app-component-b', 
    templateUrl: './app.component-b.html' 
}) 
export class AppComponentB { 
    array = [1, 2, 3]; 
} 

I array in einigen anderen Komponenten aktualisieren. Während die label die Länge des Arrays korrekt aktualisiert, scheint das Kontrollkästchen nicht aktualisiert zu werden. contains ist nur ein einfaches Rohr, das prüft, ob value Teil von array ist. Ich habe eine console.log in die contains Pipe und bekam nur die Ausgabe, wenn die Seite zuerst rendert, nicht wenn array geändert wird. Warum ist das?

Dank ..

Answer 1

das, weil ist, wenn Sie push verwenden neues Element Array hinzufügen dann die Array-Referenz nicht geändert wird, während reines Rohr nur dann ausgeführt wird, wenn es eine reine Änderung der Eingangswert erfasst (array und value in Ihrem Fall)

Es gibt zwei Lösungen:

1) return new Array

this.array = this.array.concat(4) 

oder

this.array = [...this.array, 4]; 

Plunker

2) verwenden unreine Rohr

@Pipe({name: 'contains', pure: false}) 
export class ContainsPipe implements PipeTransform { 

Plunker

Weitere Details finden Sie auch

• NgFor doesn't update data with Pipe in Angular2
• Unraveling Angular 2 book, Chapter 1, Example 5
• https://angular.io/docs/ts/latest/guide/pipes.html