得到输入值的* ngFor生成输入在离子2

Question

我想建立一个输入接口，用户可以点击一个按钮来添加一个输入域的离子。因为输入是通过* 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

工作，你可以保持2 array同步。一个在*ngFor中迭代的函数，以及一个存储输入值的函数。使用一个array作为*ngFor，然后使用其中的元素[(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); 
    } 
}