angular - ViewChildren 不在 ngFor 中绑定(bind)

Question

我有一个简单的模板:

<div *ngFor="let skill of allSkills | async ">
    <div class="skill-chart-with-img">
        <skill-chart-view></skill-chart-view>
        <div #skillImg>
            some data
        </div>
    </div>
</div>

当我尝试绑定(bind)#skillImg 时，我有一个空的查询列表:

@ViewChildren("skillImg") private skillImgs: QueryList<ElementRef>;
ngAfterViewInit(): void {
        this.skillImgs.forEach((skill: ElementRef) => {
           //some work with skill
        });
}

也许我遗漏了什么或者我的任务有更好的解决方案？

Answer 1

问题出在异步数据中。解决方案是订阅 QueryList 的变化

例子:

ngAfterViewInit(): void {
    this.skillImgs.changes
        .subscribe(() => console.log(this.skillImgs));
}