Angular 6: получить ссылку на компоненты, созданные с помощью * ngFor внутри тега ng-container

Question

Я использую ng-контейнер для итерации по списку и создания компонентов

    <ng-container *ngFor="let f of optionsList; let i = index;">

                <!-- component-->
                <app-component  #fieldcmp  *ngIf="isAppComponent(f)" ></app-field>


                <!--another components-->
                <app-anoter-component1 *ngIf="isAnotherComponent1(f)"> </app-anoter-component1>
...
                <app-anoter-componentn *ngIf="isAnotherComponentn(f)"> </app-anoter-componentn>

            </ng-container>

Я бы хотел список компонентов References внутри ng-контейнера.

Я пытался использовать @ViewChildren('#fieldcmp') fieldsList: QueryList;и @ContentChildren ('# fieldcmp') fieldsList: QueryList;внутри отца компонента, но я не получаю элементов, если я пытаюсь получить доступ в ngafterViewInit

ngAfterViewInit() {
        this.fieldsList.forEach((child) => {  /* some logic....*/});
    }

Может кто-нибудь может мне помочь?Спасибо

----------- Обновление -----------------------

после исправления с помощью @ViewChildren ('fieldcmp') у меня есть список ElementRef вместо моего AppComponent.Я разыгрываю его и все работаю

this.filedsList 
            .forEach((child) => { atLeastOneRequired = atLeastOneRequired || (<ReusableFieldComponent> child).isRequired();
    });

спасибо, что помогли

Answer 1

Попробуйте создать и очистить directive, затем запросите вашу Директиву и прочитайте ElementRef.

@ViewChildren(MyDirective, {read: Element Ref}) Kids: QueryList<ElementRef>;

У меня нет компьютера передо мной, но это идея.

Answer 2

Просто удалите знак # из селектора ViewChildren - он используется только в шаблонах:

@ViewChildren('fieldcmp') fieldsList: QueryList;

Или вы можете использовать класс компонента в качестве селектора:

@ViewChildren(HelloComponent) fieldsList: QueryList<HelloComponent>;

Рабочий стекблиц здесь: https://stackblitz.com/edit/angular-xeudlp