如何在 Ionic 4 中将动态输入字段添加到数组中？

Question

我需要在我的 Ionic 4 应用程序中动态添加一个字段。我在我的 ts 文件中声明了一个数组变量。

fields: [];

当我按下按钮时，我想生成一个带有输入字段的新字段。这是我在视图上的代码：

  <ion-grid>
    <ion-row *ngFor="let field of fields">
      <ion-col>
        <ion-input></ion-input>
      </ion-col>
      <ion-col>
        <ion-input></ion-input>
      </ion-col>
    </ion-row>
  </ion-grid>

这是我的按钮代码：

 <ion-button expand="full" (click)="addField()">Add field</ion-button>

如何在按下按钮时动态添加一行？

Answer 1

这是一个 plunker，它给出了一个如何实现的示例：https://embed.plnkr.co/6YPQXH/

基本上你有一个输入值的数组：

 words2 = [{value: 'word1'}, {value: 'word2'}, {value: 'word3'}, {value: ''}];

然后在方法 addField() 中添加它

您可以通过添加访问带有索引的值来迭代：

<div *ngFor="let word2 of words2; in as index" class="col-sm-3">
        <div class="form-group">
          <input type="text" [(ngModel)]="words2[in].value" name="name{{in}}" class="form-control" #name="ngModel" required />
        </div>
        <br />
    </div>