ViewChildren bindet nicht in ngFor

Question

ich eine einfache Vorlage haben:

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

Wenn ich auf #skillImg zu binden versuchen, ich habe eine leere Querylist:

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

Vielleicht vermisse ich etwas oder Meine Aufgabe hat eine bessere Lösung?

Answer 1

Das Problem lag in asynchronen Daten. Die Lösung ist auf Querylist abonnieren ändert

Beispiel:

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

Answer 2

HINWEIS: Sie müssen prüfen, ob Asynchron funktioniert oder nicht. Weil es schwer ist, irgendein Problem zu identifizieren, wenn es mit asynchronen Pipes verbunden ist. Aber anders als es arbeitet ViewChildren mit * ngFor wie unten gezeigt,

export class App { 

    @ViewChildren("skillImg") private skillImgs: QueryList<ElementRef>; 

    constructor(private renderer: Renderer) {} 


    ngAfterViewInit(): void { 
      this.skillImgs.forEach((skill: ElementRef) => { 
       this.renderer.setElementStyle(skill.nativeElement,"background","yellow");  
      }); 
    } 

} 

https://plnkr.co/edit/pI35tx9gXZFO1sXj9Obm?p=preview