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

Question

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

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

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

如何使用 angular 阵列系统解决这个问题？

Answer 1

试试这个：

Working Demo

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

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

pass input array data to http from ngModel in ionic 3

ionic3

angular

angular6