如何在*ngFor中设置唯一的模板引用变量？(角)

Question

我在*ngFor循环中有一堆输入字段.文档说模板引用变量应该是唯一的.有没有办法做一些#attendee-{{person.id}}让它独一无二的东西？

   <div *ngFor="let person of attendeesList">
       <input #attendee [ngModel]="person.name" (blur)="changeName(attendee.value)"/>
   </div>

(我知道有选择可以做,(ngModelChange)="changeName($event)" 但有理由我需要使用模糊.具体来说,我不希望模型更改,直到人完成输入名称,我们已经验证名称不为空而不是重复的名称.

Answer 1

您的模板引用变量已经是唯一的,因为您在嵌入式视图范围内使用它:

<div *ngFor="let person of attendeesList">
  <input #attendee [ngModel]="person.name" (blur)="person.name = attendee.value"/>
</div>

但您甚至可以省略模板引用变量,如下所示:

<div *ngFor="let person of attendeesList">
  <input [ngModel]="person.name" (blur)="person.name = $event.target.value"/>
</div>

根据 Angular 指南，传递 $event 是一种可疑的做法（https://angular.io/guide/user-input#passing-event-is-a-dubious-practice）。因此，您的第一种方法应该是首选解决方案。 (2认同)

Answer 2

模板变量需要相对于模板而言是唯一的,而不是模板的渲染(实际值).您想使用ViewChildren.

@ViewChildren('attendee') attendeeInputs: QueryList<ElementRef>;

您可以将其attendeeInputs视为QueryList,并根据索引的迭代,根据需要单独操作每个与会者输入.