Javascript 获取ionic 2中生成输入的*Ng输入值

我正在尝试构建一个输入界面，用户可以单击一个按钮在Ionic中添加一个输入字段。因为输入是通过*ngFor动态生成的，所以我无法将它们与ng模型绑定。我可以给每个输入一个唯一的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>

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

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

编辑：

我试着加上

id="attr[i]"

与

`getAttributes（）{
设attrArr=[]
对于（设i=0；i

及

[（ngModel）]=“attr{{i}”name=“attr{{{i}}”

结合

---

this.attr[i]

，它根本不起作用

您可以使两个

数组保持同步。一个用于在
*ngFor
中迭代，另一个用于存储输入值。为
*ngFor
使用一个
数组
，然后在
[（ngModel）]
中使用其元素，将使
*ngFor
在每次输入字符时运行，这将导致
输入在输入字符后失去焦点

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>

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);
    }
} 


添加输入
输入#{i+1}
获取价值

TS:

<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>

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);
    }
} 

从'@angular/core'导入{Component}；
从“离子角度”导入{IonicPage}；
@IonicPage（）
@组成部分({
选择器：“某个页面”，
templateUrl:'some page.html'
})
导出类SomePage{
属性：数组=[]；
值：数组=[]；
构造函数（）{}
valChange（值：字符串，索引：编号）：void{
这个。值[索引]=值；
}
addInput（）：void{
this.attributes.push（this.attributes.length）；
这个。值。推（“”）；
}
移除输入（索引：编号）：无效{
这个.attributes.splice（索引，1）；
该值为拼接（索引1）；
}
getValues（）：void{
console.log（this.values）；
}
} 
您能将代码发布到您试图获取输入值的地方吗？有一个比维护两个数组更好的选择，使用trackBy，以避免失去输入焦点：