Angular 从ngFor循环的索引生成的formControl名称，创建动态表单

我正在尝试构建一个“就地编辑”输入表单，当用户单击该字段时更改产品的名称。我的问题是，所讨论的名称字段是使用ngFor循环打印出来的，我不知道会有多少个，每个用户的名称都会不同。 是否有办法动态更改名称字段，然后在表单中引用动态名称？我猜类似于：nameField1、nameField2等，但是使用 ngFor=“让crudService.subscriptions.subscriptions的项目

html:

---

我在Angular中见过formArray和FormGroup builder，但我发现这很难理解，我不确定这是否是我所需要的。

您可以使用索引值编辑名称，以便跟踪正在编辑的索引名称。因为只有这样才能按索引值跟踪编辑输入

如果你想要一个正式的例子，我可以提供给你，如果下面的解决方案不适合你

//确保按索引进行跟踪
{{item.productName}
编辑
编辑名
拯救
取消

然后在ts文件中进行更改

从“@angular/forms”导入{FormControl}”；
导出类SubscriptionComponent实现OnInit{
nameField=新表单控件（“”）；
indexToEdit:number=null；
editName（项目名称：字符串，子索引：编号）{
console.log（子索引）；
this.nameField.setValue（itemName）；
this.indexToEdit=subIndex；//设置索引值并在编辑名称后重置
}
}

如果能看到FormArray版本，那就太好了，虽然这是可行的，但我有另一个字段也在做同样的工作来更改价格，使用FormArray代码可能会更整洁

<tr *ngFor="let item of crudService.subscriptions.subscriptions; index as i">
    <td>
      <div *ngIf="!showEditName">
        <div>
          {{ item.productName }}
        </div>
        <div>
          <button class="btn-sc btn-blac" (click)="editName(item.productName, i)">Edit</button>
        </div>
      </div>

      <div class="col" *ngIf="showEditName">
        <div class="md-form">
          <input mdbInput mdbValidate type="text" class="form-control" [formControl]="nameField" />
          <label for="editName">EditName</label>
        </div>
        <div>
          <button class="btn-sc btn-blac" (click)="editName()">save</button>
          <button class="btn-sc btn-blac" (click)="editName()">cancel</button>
        </div>
      </div>
    </td>
</tr>

import { FormControl } from "@angular/forms";

export class SubscriptionsComponent implements OnInit {

nameField = new FormControl("");
showEditName: boolean = false;

  editName(itemName: string, subIndex: number) {
    console.log(subIndex);
    this.nameField.setValue(itemName);
    this.showEditName = !this.showEditName;
  }
}