Как я могу получить дочерние элементы из QueryList в Angular 2?

Я новичок в 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);
    });
}

но он ничего не делает. метод toArray (), вызываемый QueryList, возвращает пустой массив.

любые предложения, как я могу получить все дочерние компоненты на один раз и назовите его методы?

7
angular viewchild

2 ответов

Если clients устанавливается из асинхронного вызова (например, на сервер), тогда элементы не существуют в ngAfterViewInit() еще.

можно использовать

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

см. также https://angular.io/api/core/QueryList#changes

9

Я думаю, вы должны использовать атрибут @ContentChildren вместо ViewChildren. 

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