如何在* 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>

<强> Working Example

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

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

Answer 2

模板变量需要相对于模板而言是唯一的，而不是模板的渲染（实际值）。您想使用ViewChildren。

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

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

Answer 3

如果您的表单中有一系列可迭代的输入，并且有关于您希望表单如何响应用户输入的大量逻辑，那么ReactiveFormsModule将更适合。这样您就不必担心模板引用变量，并且可以直接与FormControls进行交互。

基本上使用Reactive Forms，它看起来像

<强>组件

// Initialize your Form
initForm(): void {
    this.Form = this._FormBuilder.group({
        arrayOfInputs: this._FormBuilder.array(initArray())
    })
}

// Initialize the Array of Inputs 
initArray(): FormGroup[] {
    return [
        { this._FormBuilder.group({ inputValue: [''] }),
        { this._FormBuilder.group({ inputValue: [''] }),
        { this._FormBuilder.group({ inputValue: [''] })
    ]
}

<强>模板

<ng-container formArrayName="formArray">
    <div [formGroupName]="i" *ngFor="let Inputs of Form.get('arrayOfInputs').controls; let i=index">
        <input formControlName="inputValue" type="text">
    </div>
</ng-container>

这里缺少一些东西，但通常这就是我如何构建具有可交换输入的表单。主要区别在于，通常在初始化FormArray时，我使用从某处提取的数据。以逻辑块的形式构建表单确实很有帮助。

Reactive Forms