在ionic 3中将输入数组数据从ngModel传递到http

Question

我正在尝试开发具有以下设计的移动应用程序。

当单击继续按钮时，我需要将数据发送到http api

data = {
 {'product':'Salt','quantity',23,'price',4567},
 {'product':'Sugar','quantity',12,'price',21}, 
 {'product':'Egg','quantity',2,'price',64}, 
 {'product':'Milk','quantity',8,'price',243}
};

我在堆栈中尝试了许多答案，但无法正常工作。

 <ion-list>
    <div class="itemPro" *ngFor="let product of products;let i = index;">
      <div class="prduct">{{product.name}}</div>
      <div class="quanty"><input [(ngModel)]="quanty_i" type="number"/></div>
      <div class="amt"><input [(ngModel)]="amt_i" type="number"/></div>
    </div>
  </ion-list>

 <div class="w80">
      <button class="big-btn" ion-button full (click)="continueToReview()">Continue</button>
  </div>

 continueToReview(){
   console.log(this.product.quantity);
 }

如何使用角度阵列系统解决此问题？

Answer 1

尝试这个 ：

工作演示

<div class="itemPro" *ngFor="let product of products;let i = index;">
  <div class="prduct">{{product.product}}</div>
  <div class="quanty"><input [(ngModel)]="product.quantity" type="number"/></div>
  <div class="amt"><input [(ngModel)]="product.price" type="number"/></div>
</div>

由于您有多个产品项，但是您只在寻找选定的产品，

我们需要将按钮移到ion-list中以获得数组的索引。

 <div class="itemPro" *ngFor="let product of products;let i = index;">
  ...
  <div class="w80">
      <button class="big-btn" ion-button full (click)="continueToReview(i)">Continue</button>
  </div>
  ... 
 </div>

Component.ts

continueToReview(index) {
   const selectedProd = this.products[index];
}