在IONIC2中获得动态创建的离子输入值

时间:2016-07-06 04:03:48

标签: javascript angular typescript ionic2 ionic3

我有以下HTML部分,其中基于ion-item动态创建*ngFor

<ion-list *ngIf="Label_view">

  <ion-item style="Float:Right;margin-left: 4%;" *ngFor="let bil of arr_label;let i=index ">
    <ion-label floating>{{bil}}</ion-label>
    <ion-input [(ngModel)]="array" id={{i}}  type="text"  maxlength="5"></ion-input>
  </ion-item>

注册     

我必须将ion-input的值变为component。我使用[(ngModel)]值绑定到数组。

我的组件方

array:any[]=[];

Blr_regis()
{
    console.log( array);
  //  console.log(document.getElementById("1").Value);
    var x=document.getElementById("1").Value;
   console.log(x);
}

我将UNDEFINED作为控制台输出。 有什么遗失的吗?

1 个答案:

答案 0 :(得分:3)

问题是因为您尝试使用input元素绑定Array。它应绑定到字符串或数字(或数组的单个位置)。

而不是做这样的事情:

  <ion-item style="Float:Right;margin-left: 4%;" *ngFor="let bil of arr_label;let i=index ">
    <ion-label floating>{{bil}}</ion-label>
    <ion-input [(ngModel)]="array" id={{i}}  type="text"  maxlength="5"></ion-input>
  </ion-item>

let中有两个*ngFor,为什么不把所有内容放在同一个数组中:

this.newArray : Array<{id: number, value: string}> = [];

// Assuming the `arr_label` exists and it has been properly initialized
for(let i=0; i < arr_label.length; i++) {
    this.newArray.push({ id: i, value: arr_label[i] });
}

然后在你看来:

  // We only iterate over the newArray because all the information we need is there
  <ion-item style="Float:Right;margin-left: 4%;" *ngFor="let bill of newArray">

    <ion-label floating>{{bill.value}}</ion-label>
    <ion-input [(ngModel)]="array[bill.id]" type="text" maxlength="5"></ion-input>

  </ion-item>

请注意,我们现在使用input(将为0,1等等)将id绑定到数组的单个位置。

您可以找到有效的plunker here。请查看Page1.tsPage1.html

中的代码