Angular：为什么带有 QueryList 的 ViewChild 只返回第一个实例？

Question

I have an Angular component called Component1 . It contains several nested instances of the same component, like this:

<div>
  <ng-container *ngFor='let item of items'>
    <component-1>
  </ng-container>
</div>

All 5 items in items are being displayed, so I know they're there. However, when I try to retrieve an array containing all 5 instances of Component1 like this:

@ViewChild(Component1) children: QueryList<Component1>;

then children , instead of containing an array of Component1 s, contains only one Component1 : the first of the 5.

Anyone know why this would be?

Answer 1

You will need to use @ViewChildren

Use to get the QueryList of elements or directives from the view DOM. Any time a child element is added, removed, or moved, the query list will be updated, and the changes observable of the query list will emit a new value.

@ViewChildren(Component1) children: QueryList<Component1>;

---

ViewChild only returns the first item.

Property decorator that configures a view query. The change detector looks for the first element or the directive matching the selector in the view DOM.