Question

我尝试在Form中创建一个动态的行，其中包含6列，这些行将有6个离子输入，并通过ngModel检索它。问题是如何让ngModel标签也动态创建，因此它们是唯一的？他们会重复，而不是我需要的东西。

    <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>

动态创建离子输入

1 个答案: