获取 *ngFor 在 ionic 2 中生成的输入的输入值

Question

我正在尝试构建一个输入界面，用户可以在其中单击一个按钮以在 Ionic 中添加一个输入字段。因为输入是通过 *ngFor 动态生成的，所以我在将它们与 ng-Model 绑定时遇到了问题。我可以给每个输入一个唯一的 id，但不能获取这个字段的值。

查看我的 HTML：

  <ion-list>
  <ion-item>
    <ion-label>Name</ion-label>
    <ion-input name="name"></ion-input>
  </ion-item>
<ion-item-sliding *ngFor="let attribute of attributes; let i = index;">
  <ion-item>
    <ion-input type="text" placeholder="Attribute {{i + 1}}"></ion-input>
    <ion-select placeholder="Type" interface="popover">
      <ion-option value="0" selected="true">Checkbox</ion-option>
      <ion-option value="1">Text</ion-option>
    </ion-select>
  </ion-item>
  <ion-item-options>
    <button ion-button color="danger" (click)="deleteItem(i)">Delete</button>
  </ion-item-options>
  </ion-item-sliding>
  <button ion-button icon-only style="float: right" (click)="onClickAddAttribute()">
    <ion-icon name="add"></ion-icon>
  </button>
</ion-list>

还有我的 ts：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
import { Storage } from '@ionic/storage';

@IonicPage()
@Component({
  selector: 'page-new-stack',
  templateUrl: 'new-stack.html',
})
export class NewStackPage {
  attributes = [0];
  name = "";
  constructor(public navCtrl: NavController, public navParams: NavParams,
              public storage: Storage, public alertCtrl: AlertController) {
  }

  onClickAddAttribute(){
      this.attributes.push(this.attributes.length);
  }

  deleteItem(i){
    this.attributes.splice(i, 1);
  }
}

我不需要立即输入值，而是在单击按钮后

提前谢谢你，原谅我的英语

编辑：

我尝试添加

id="attr[i]"

与

`getAttributes(){ 
    let attrArr = [] 
    for (let i = 0; i < this.attributes.length; i++) { 
      attrArr.push(document.getElementById("attr"+[i])); 
    } 
    console.log(attrArr); 
  }` 

和

[(ngModel)]="attr{{i}}" name="attr{{i}}" 结合 this.attr[i] ，根本不起作用

Answer 1

您可以让两个arrays 保持同步。一种是在*ngFor 中迭代的，另一种是存储输入值的。为*ngFor 使用一个array，然后在[(ngModel)] 中使用它的元素，将使*ngFor 在每次您在输入中输入字符时运行，这将导致input 在输入后失去焦点一个角色。

HTML：

<ion-content>

    <button ion-button (click)="addInput()">Add Input</button>
    <ion-item *ngFor="let item of attributes; let i = index">
        <ion-label>Input #{{ i + 1 }}</ion-label>
        <ion-input [(ngModel)]="values[i]" (input)="valChange($event.target.value, i)" type="text"></ion-input>
        <button item-right ion-button icon-only (click)="removeInput(i)">
            <ion-icon name="close"></ion-icon>
        </button>
    </ion-item>

    <button ion-button (click)="getValues()">Get values</button>

</ion-content>

TS：

import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';

@IonicPage()
@Component({
    selector: 'some-page',
    templateUrl: 'some-page.html'
})
export class SomePage {
    attributes:Array<number> = [];
    values:Array<string> = [];

    constructor() { }    

    valChange(value:string, index:number):void{
        this.values[index] = value;
    }

    addInput():void{
        this.attributes.push(this.attributes.length);
        this.values.push('');
    }

    removeInput(index:number):void{
        this.attributes.splice(index, 1);
        this.values.splice(index, 1);
    }

    getValues():void{
        console.log(this.values);
    }
}