angular - 使用 Ionic 自动汇总输入到 ngFor 中的数据

Question

我正在尝试自动添加在输入中找到的值而不进行任何提交，并且我试图通过数组获取数据但我不能。

    <ion-card-content *ngFor="let info of data; let i = index ">
              <ion-label><i>{{info.name}}:</i></ion-label>
              <ion-item class="inputItem" >
                <ion-input (ngModel)="info.id" name="{{info.id}}"></ion-input>
              </ion-item>
   </ion-card-content>
  <ion-label>{{total}}</ion-label>

数据示例：

data=[
{"id":"1","name":"name1"},
{"id":"2","name":"name2"},
{"id":"3",,"name":"name3"},...
]

标签： angularionic-framework

Answer 1

使用 TypeScript 和文档对象，您可以获取容器内所有离子输入的值：

a）将您的输入放入容器中div

<div id="inputContainer">
  <ion-card-content *ngFor="let info of data; let i = index ">
              <ion-label><i>{{info.name}}:</i></ion-label>
              <ion-item class="inputItem" >
                <ion-input type="number" (ionInput)="getSum()" name="{{info.id}}"></ion-input>
              </ion-item>
   </ion-card-content>
</div>
 <ion-label>{{total}}</ion-label>

b) 在每个输入事件上调用 getSum() 函数

getSum()
  {
    let container=document.getElementById('inputContainer');
    let inputElements=container.getElementsByClassName('native-input');
    this.total=0;
    let eachInput:HTMLInputElement;
    for(let i=0;i<inputElements.length;i++)
    {
      eachInput=<HTMLInputElement>inputElements.item(i);
      this.total+=Number(eachInput.value);
    }
  }

说明：在这里，我们获取所有原生input标签并访问它们的value属性。(ionInput)每次您在任何ion-input