ViewChildren 在 ngFor 中没有绑定 [英] ViewChildren doesn't bind in ngFor

问题描述

我有一个简单的模板:

<div class="skill-chart-with-img"><技能图表视图></技能图表视图><div #skillImg>一些数据

当我尝试绑定 #skillImg 时，我有一个空的 QueryList:

@ViewChildren("skillImg") private SkillImgs: QueryList;ngAfterViewInit(): 无效 {this.skillImgs.forEach((skill: ElementRef) => {//一些有技巧的工作});}

也许我错过了什么，或者我的任务有更好的解决方案?

解决方案

问题出在异步数据中.解决方案是订阅 QueryList 更改

示例:

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

I have a simple template:

<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>

When I try to bind on #skillImg, I have an empty QueryList:

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

Maybe I miss something or my task have a better solution?

解决方案

The problem was in async data. The solution is to subscribe on QueryList changes

Example:

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

这篇关于ViewChildren 在 ngFor 中没有绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！