Почему @ViewChildren не видит второй компонент и как передать async данные через Input?

В родительском компоненте имею:

<app-filter *ngIf="interagencyFilters.doctypes | async as doctypes" [filter]="interagencyFilters.doctypes | async"></app-filter>
<app-filter *ngIf="interagencyFilters.status | async as status" [filter]="status"></app-filter>


Данные как видно прилетают асинхронно, как только данные получены - компонент инициализируется и внутрь передаются сами данные.

Пытаюсь в род.компоненте получить спикок <app-filter>:

@ViewChildren(FilterComponent) filtersList: QueryList<FilterComponent>;
    ngAfterViewInit() {
       console.log(this.filtersList.length);
    }


console.log(this.filtersList.length); дает мне всегда значение 1. Несмотря на то, что на странице два компонента.

Очевидно, что проблема в асинхронности. Как это можно решать и как правильно передать асинхронные данные в компонент через @input()?

Пробовал решить так:

<
app-filter [filter]="doctypes"></app-filter>
<app-filter [filter]="status"></app-filter>


ngOnInit() {
              this.interagencyFilters.doctypes.subscribe((res) => (this.doctypes = res));
        this.interagencyFilters.status.subscribe((res) => (this.status = res));
        this.changeDetector.detectChanges();
    }


Результат ViewChildren тоже 1
  • Вопрос задан
  • 55 просмотров
Пригласить эксперта
Ответы на вопрос 1
@LastDragon
> `console.log(this.filtersList.length);`

Нужно использовать https://angular.io/api/core/QueryList#changes

this.filtersList.changes.subscribe((filters) => {
   console.log(filters);
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы