Angular 如何使用 ViewChildren 循环 QueryList？

Question

I have child components in ngFor:

@ViewChildren(SingleMultiSelectionComponent) singleMultiSelections: QueryList<SingleMultiSelectionComponent>;

Then i want to loop throught that QueryList:

console.log(this.singleMultiSelections) // 1 item in _results , but results are private
for(let component of this.singleMultiSelections){
  console.log(component); //Not Working
 }

Answer 1

There is nothing wrong with your code per se.

QueryList implements Iterable, so you can use methods such as forEach , map , and for (let i of items) on it. You can view this in more detail in the Angular Documentation .

Keep in mind that for the QueryList to produce the expected results, you can only call it after the LifeCycle hook AfterViewInit has been called. Until then the list will not have been loaded, you read the official notes .

You can do so like this:

@ViewChildren(SingleMultiSelectionComponent) singleMultiSelections: QueryList<SingleMultiSelectionComponent>;

onAfterViewInit() {
  for(let component of this.singleMultiSelections){
    // Code here
  }
}

Answer 2

Firstly, it depends where you are calling it from. Probably you will have to call it in ngAfterViewInit when all the components are instantiated. If you are calling before that, those components might not yet exist