动态创建离子输入

Question

我正在尝试在 Form 内动态创建一个包含 6 列的行，该行将具有 6 个离子输入，并通过 ngModel 检索它。问题是我怎样才能让 ngModel 标签也被动态创建，所以它们是独一无二的？ atm 他们被重复了，这不是我需要的。

    <ion-content>
     <ion-grid>
      <form #f="ngForm" (ngSubmit)="postDados(f)" >
       <ion-row class="row header">
        <ion-col class="col">Nervos</ion-col>
        <ion-col class="col">Service Code</ion-col>
        <ion-col class="col">Pay Limit</ion-col>
        <ion-col class="col">Account Number to Use</ion-col>
        <ion-col class="col">Account Number to Use</ion-col>
        <ion-col class="col">Account Number to Use</ion-col>        
   </ion-row>
   <ion-row class="row" *ngFor ="let nervo of nervos">
      <ion-col class="col">
          <ion-input type="text" name="categoria" ngModel #categoria="ngModel"></ion-input>  
      </ion-col>
      <ion-col class="col">
          <ion-input type="text" name="nome" ngModel #nome="ngModel"></ion-input>
      </ion-col>
      <ion-col class="col"></ion-col>
      <ion-col class="col"></ion-col>
      <ion-col class="col"></ion-col>
      <ion-col class="col"></ion-col>             
  </ion-row>
</form>
  <ion-row>
    <ion-col col-6>
        <ion-input type="text" [(ngModel)]="nomeNervoNovo" name="nomeNervoNovo"></ion-input> 
    </ion-col>
    <ion-col col-6>
        <button ion-button (click)="pushRow(nomeNervoNovo)" color="danger">
            Inserir
        </button> 
    </ion-col>  
    </ion-row>                      
    <ion-item>
          <button [disabled]="cadastro.invalid" ion-button full block color="danger">Enviar</button>
        </ion-item>

该按钮会推动 nervos 数组中的一个新项目，因此它会创建一个包含 6 列的新行。

Answer 1

由于这是一个表单，因此您可以与ngModel 和name 一起注册表单控件。因此，使每个名称都是唯一的，意味着您的字段都是唯一的，而不是指同一个字段。因此，对于您的迭代跟踪当前索引，并将索引值合并到您的 name 属性中，例如您喜欢的，例如：

<!-- track index of iteration -->
<ion-row class="row" *ngFor ="let nervo of nervos; let i = index">
  <ion-col class="col">
    <!-- add index to 'name' attribute -->
    <ion-input type="text" name="categoria{{i}}" ngModel #categoria="ngModel"></ion-input>  
  </ion-col>
  <ion-col class="col">
    <ion-input type="text" name="nome{{i}}" ngModel #nome="ngModel"></ion-input>
  </ion-col>