得到輸入值的* 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); 
    } 
}