小编raf*_*sio的帖子

Angular 6:获取对在 ng-container 标签中使用 *ngFor 创建的组件的引用

我使用 ng-container 迭代列表并创建组件

    <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>
Run Code Online (Sandbox Code Playgroud)

我想列出 ng-container 中的 References 组件。

我尝试使用 @ViewChildren('#fieldcmp') fieldsList: QueryList; 和@ContentChildren('#fieldcmp') fieldsList: QueryList; 在父组件内部,但如果我尝试在 ngafterViewInit 中访问,我将没有任何元素

ngAfterViewInit() {
        this.fieldsList.forEach((child) => {  /* some logic....*/});
    }
Run Code Online (Sandbox Code Playgroud)

有人可以帮助我吗?谢谢

-----------更新---------------

使用@ViewChildren('fieldcmp') 修复后,我有一个ElementRef列表,而不是我的 AppComponent。我用它和所有的工作

this.filedsList 
            .forEach((child) => { atLeastOneRequired = atLeastOneRequired || (<ReusableFieldComponent> child).isRequired();
    });
Run Code Online (Sandbox Code Playgroud)

谢谢你的帮助

ngfor viewchild angular ng-container angular6

1
推荐指数
1
解决办法
4695
查看次数

标签 统计

angular ×1

angular6 ×1

ng-container ×1

ngfor ×1

viewchild ×1