区分ngFor中同名的viewChild

Posted 2023-03-13

【中文标题】区分ngFor中同名的viewChild

【英文标题】：Differentiate viewChild with same name in ngFor

【发布时间】：2019-07-19 16:59:45

【问题描述】：

在我的 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 实例上？

【问题讨论】：

你可以使用@ViewChildren检查这个***.com/questions/40165294/…

Access multiple viewchildren using @viewchild的可能重复

【参考方案1】：

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

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

....

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

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

【讨论】：

@Bear 你也可以使用 for(let item of this.itemName)... 遍历 QueryList。如果只需要第一个元素，您可以使用 this.itemName.first.nativeElement.focus()