Comment obtenir des éléments enfants de QueryList in Angular 2?

Question

Je suis novice à Angular2. À mon avis, j'ai quelques enfants identiques générés dans * ngFor.

<ngb-panel *ngFor="let client of clients" [title]="'Client #' + client.id">
    <template ngbPanelContent>
        <processing-item [client]="client"></processing-item>
    </template>
</ngb-panel>

J'ai besoin d'appeler les méthodes de ces composants dans l'élément parent et de trouver le décorateur ViewChildren. Le code est le suivant:

@ViewChildren(ProcessingItemComponent) processingItems: QueryList<ProcessingItemComponent>;

Ensuite, j'essaie de les parcourir par forEach:

ngAfterViewInit() {
    this.processingItems.forEach(function (el) {
        console.log(el);
    });
}

Mais ça ne fait rien. La méthode toArray () appelée sur QueryList renvoie un tableau vide.

Toutes les suggestions, comment puis-je obtenir tous les composants enfants en même temps et appeler ses méthodes?

Answer 1

Si clients est défini à partir d'un appel asynchrone (par exemple vers le serveur), les éléments n'existent pas encore dans ngAfterViewInit().

Vous pouvez utiliser

ngAfterViewInit() {
  this.processingItems.changes.subscribe(() => {
    this.processingItems.toArray().forEach(el => {
        console.log(el);
    });
  });
}

Voir aussi https://angular.io/api/core/QueryList#changes

Answer 2

Je pense que vous devriez utiliser l'attribut @ContentChildren au lieu de ViewChildren. 

@ContentChildren( OptionComponent )
public Options: QueryList<OptionComponent>;