mise à jour dynamique [vérifié] dans 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]; 
} 

mettre à jour array dans certains autres composants. Alors que label met correctement à jour la longueur du tableau, la case à cocher ne semble pas être mise à jour. contains est juste un simple tuyau qui vérifie si value fait partie de array. Je mets un console.log dans le tuyau contains et obtient seulement la sortie quand la page est rendue au début, pas quand array est changé. Pourquoi est-ce?

Merci ..

Answer 1

C'est parce que si vous utilisez push ajouter nouvel élément à tableau, alors la référence du tableau ne change pas en pipe pure ne sera exécutée que lorsqu'il détecte un changement pur à la valeur d'entrée (array et value dans votre cas)

Il y a deux solutions:

1) retour nouveau tableau

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

ou

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

Plunker

2) utiliser la pipe impure

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

Plunker

Pour plus de détails, voir aussi

• 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