如何在* 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)"但出于某些原因，我需要使用blur方法 。具体来说，我不希望在完成此操作之前键入要更改的模型名称，并且我们已经确认该名称不为空，并且不是重复的名称。

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>

Answer 2

模板变量相对于模板必须是唯一的，而不是模板的呈现（实际值）。 您想使用ViewChildren 。

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

你可以把attendeeInputs作为QueryList以及基于指数的迭代需要在每个与会者输入单独操作。

Answer 3

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

本质上，使用反应形式，它看起来像

零件

// 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时，我会使用从某处提取的数据。 这确实有助于以逻辑块形式构建表单。

反应形式