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

Question

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

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

(我知道可以选择执行 (ngModelChange)="changeName($event)" 但出于某些原因我需要改用 blur。具体来说，我不希望模型在用户完成输入名称并且我们已经验证名称不为空且不重复之前更改。

Answer 1

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

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

Working Example

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

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