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

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

@ViewChildren('fieldcmp') fieldsList: QueryList;

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

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

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

Answer 2

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

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

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