web-dev-qa-db-ja.com

Angular 2のQueryListから子要素を取得するにはどうすればよいですか？

私はAngular2の初心者です。私の見解では、* ngForで生成される同一の子はほとんどありません。

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

親要素でこれらのコンポーネントのメソッドを呼び出し、ViewChildrenデコレータを見つける必要があります。コードは次のとおりです。

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

次に、forEachでそれらを反復しようとします。

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

しかし、それは何もしません。 QueryListで呼び出されるtoArray（）メソッドは、空の配列を返します。

すべての子コンポーネントを一度に取得してそのメソッドを呼び出す方法はありますか？

angularviewchild
16
Anna Ladyzhenskaya

clientsが（たとえばサーバーへの）非同期呼び出しから設定されている場合、要素はngAfterViewInit()にまだ存在しません。

使用できます

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

https://angular.io/api/core/QueryList#changes も参照してください

20
Günter Zöchbauer

ViewChildrenの代わりに@ContentChildren属性を使用する必要があると思います。

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