Question

在我的html组件中，我有一个*ngFor循环，该循环生成像这样的多个元素：

<div *ngFor="let item of items">
  <p #itemName>{{item.name}}</p>
</div>

然后在我的.ts组件中访问<p>，我正在这样做：

@ViewChild('itemName') itemName: ElementRef;

以我做某事为例：

this.itemName.nativeElement.focus();

我的问题是，由于可以有多个p标记，因此.ts文件中将有itemName的多个实例，并且在尝试对其进行处理时，例如上面的示例， itemName的第一个实例将被聚焦。

有人可以帮助我确定当前使用的itemName我是哪个实例吗？

谢谢！

Answer 1

您可以使用@viewChildren选择具有相同模板引用变量的多个元素。您应该使用QueryList方法将toArray()转换为数组，以循环遍历元素。

import { ViewChildren, QueryList } from '@angular/core';

....

@ViewChildren('itemName') itemName: QueryList<ElementRef>;

ngAfterViewInit() {
  this.itemName.toArray().forEach(el => {
    el.nativeElement.focus();
});
}

在ngFor中区分同名的viewChild |角度的

1 个答案: