Question

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

git

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

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>

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

Answer 1

这里有个小矮人，举了一个例子说明如何实现：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>

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

1 个答案: