pass input array data to http from ngModel in ionic 3

Question

I am trying to develop a mobile app with below design..

When click on the continue button I need to send data to 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}
};

I tried many answers in stack and its not working.

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

How can I solve this issue with angular array systems ?

@ganesh045 Updated question with products array. please check. — Jishad
– Jishad, Commented Nov 27, 2019 at 16:29

Ganesh · Accepted Answer · 2019-11-27 16:57:37Z

1

Try this :

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>

since you have multiple product items but you are looking for only selected product,

we need to move button in to ion-list in order to get index of the Array.

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

edited Nov 27, 2019 at 16:57

answered Nov 27, 2019 at 16:36

Ganesh

6,0663 gold badges26 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jishad Over a year ago

May I know that how can I access these variables in my on click function ? I wan to accept the input of quantity and price..

Ganesh Over a year ago

I have not seen any click() fn in your code, is that on first div...

Jishad Over a year ago

Updated question, Can you please recheck ?

Jishad Over a year ago

Thank you for your answer, but can ask that is it require every single line click button right ? is there any way to do it with a single submit button to capture the values ?

Collectives™ on Stack Overflow

pass input array data to http from ngModel in ionic 3

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related