如何在 ngFor 中以角度使用 nativeElement.focus() 和每个唯一输入

Question

我有一个 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>

以及TS代码：

 openTransporterFreightEditing:boolean = false
@ViewChild('inputTransporter') inputTransporter: ElementRef;

openEdit() {
    this.openTransporterFreightEditing = true
    this.inputTransporter.nativeElement.focus()
}

输入字段最初是隐藏的。单击编辑符号时，输入变为可见。我想在输入可见时立即集中它。但是，我想通过使用 nativeElement.focus() 来关注一个特定的输入，但由于循环创建的每个输入元素中的相同 ID“inputTransporter”，我遇到了困难。 如何基于（单击）关注一个特定的输入 ID。如果我必须为每个元素生成唯一 ID，我可能必须使用 [attr.id]，它不适用于 @ViewChild。

我在 stackblitz 中的代码：

https://stackblitz.com/edit/angular-4hedvr?file=src%2Fapp%2Fapp.component.ts

Answer 1

您可以使用@ViewChildren 访问QueryList 的数组。

您可以将index 传递给您的openEdit 函数并访问所需的本机元素，然后将其聚焦。

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

https://stackblitz.com/edit/angular-sgudix?file=src%2Fapp%2Fapp.component.ts

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>

app.component.ts

  @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';
  }

这应该让您对如何在最后实施它有一个很好的了解。

希望对你有帮助。

PS：有些东西不符合标准，例如在 HTML 中声明变量、使用 any 类型等，因为这是一个粗略的演示应用程序，只是提供一个想法。