在 IONIC2 中动态创建离子输入值答案

【问题标题】：Getting dynamically created ion-input value in IONIC2在 IONIC2 中动态创建离子输入值
【发布时间】：2016-11-08 00:59:58
【问题描述】：

我有以下 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 作为控制台输出。有什么遗漏吗？

【问题讨论】：

由于您将数组作为 ngmodel 放置，因此您正在变得未定义。它应该是一个字符串或一个数字。喜欢 [(ngModel)]="bil.Id"
谢谢你..:) @misha130

标签： javascript angular typescript ionic2 ionic3

【解决方案1】：

问题是因为您尝试将 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>

在*ngFor 中有这两个let，为什么不将所有内容放在同一个数组中，如下所示：

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>

请注意，我们现在使用 id（将是 0、1 等）将 input 绑定到数组的单个位置。

您可以找到工作的plunker here。看看Page1.ts和Page1.html中的代码

【讨论】：