Javascript 如何将nativeElement.focus（）与ngFor中的每个唯一输入一起使用

我有一个ngFor循环，如下所示

<div *ngFor= "let transporter of transporters">
    <input type="text"  [(ngModel)]= "transporter.name" #inputTransporter *ngIf="openTransporterFreightEditing">
    <mat-icon class="cursor-btn"  (click)="openEdit()">mode_edit</mat-icon>
</div>

输入字段首先是隐藏的。单击编辑符号时，输入变为可见。我想在输入可见时立即将其聚焦。然而，我想通过使用nativeElement.focus（）来关注一个特定的输入，但是我面临着困难，因为循环创建的每个输入元素中都有相同的ID“inputTransporter”。 如何基于（单击）聚焦一个特定的输入ID。如果我必须为每个元素生成唯一的ID，我可能必须使用

[attr.ID]

，它不适用于

@ViewChild

我在stackblitz中的代码：

---

您可以使用

@ViewChildren

访问

查询列表的数组

您可以将
索引
传递给您的
openEdit
函数，访问所需的本机元素，然后对其进行聚焦

有关如何访问儿童的演示示例，请参阅以下链接：-


app.component.html

<div>
  <div *ngFor="let a of [1,2,3]; let i=index">
      <p #para>Para {{a}}</p>
    <button (click)="colorMe(i)">Color Me</button>
  </div>
</div>

这将给你一个关于如何在你的终端实现它的好主意

希望能有帮助

PS：有些东西不符合标准，比如在HTML中声明变量，使用
any
类型，等等。因为这是一个粗略的演示应用程序，只是给出了一个想法。
我刚刚开始学习angular，你能解释一下我如何使用焦点索引（）？好的，我会在演示代码中帮助你。给我几分钟。请检查一下，我已经做了一个样本，你可以在其中给你的段落上色。用同样的方法来集中你的输入。现在让我知道它是否有用。错误是“无法读取未定义的属性‘map’”。组件初始化时，paras变量未填充请使用以下stackblitz中的类似内容
<div>
  <div *ngFor="let a of [1,2,3]; let i=index">
      <p #para>Para {{a}}</p>
    <button (click)="colorMe(i)">Color Me</button>
  </div>
</div>

  @ViewChildren('para') paras: any;
  paraElements: any;

  ngAfterViewInit() {
    this.paraElements = this.paras.map(para => {
      console.log('Paras: ', para.nativeElement);
      return para.nativeElement;
    })
  }

  colorMe(index) {
    console.log('Index: ', index);
    this.paraElements[index].style.backgroundColor = '#5789D8';
  }