add minus count and submit data in array

Issue

I got problem to add minus count in array. when I try to plus or minus no value display. The issue appear when I using array method. Sorry, I'm new to array method. Could you all show me where is my fault code. This my demo code in stackblitz

HTML

<div class="p-buttom">
    <ion-button expand="full" color="dark" (click)="add()">Add</ion-button>
</div>
    <div class="size-bg" *ngFor="let num of size;let i = index">
    <span style="display: flex;">
        <ion-col>
            <ion-item lines="none" size="6" class="border">
                <ion-label position="stacked">weight</ion-label>
        <ion-input type="text" class="uppercase" [(ngModel)]="data.weight[i]" name="menuCode"></ion-input>
            </ion-item>
        </ion-col>
        <ion-col>
            <ion-item lines="none" size="6" class="border">
                <ion-label position="stacked">Price</ion-label>
        <ion-input type="text" class="uppercase" [(ngModel)]="data.price[i]" name="menuCode"></ion-input>
            </ion-item>
        </ion-col>
    </span>
    <ion-label style="color: black; ">quantity</ion-label>
    <ion-col size="12">
        <div class="add-quatity">
            <ion-button class="removeBtn no-padding " fill="solid " slot="end" style="color: black;" (click)="MinusMinOrder() ">
               -
            </ion-button>
            <ion-input class="itemCount no-padding" name="quantity" (keypress)="numberOnlyValidation($event)" [(ngModel)]="data.quantity[i]" value="{{addQuantityP[i]}}"></ion-input>
            <ion-button class="addBtn no-padding " fill="solid " slot="end" style="color: black;" (click)="addQuantity(i) ">
                +
            </ion-button>
        </div>
    </ion-col>
    <div>
        <ion-button expand="full" color="danger" *ngIf="i >0" (click)="remove(i)">Delete</ion-button>
    </div>
    </div>
<div>
  <ion-button fill="solid " slot="end" (click)="addMenu() ">Submit</ion-button> 
</div>

Component

add(){
    this.size.push('');
  }

  remove(index) {
    this.size.splice(index,1)
  }
  minusQuantity(i){
    console.log(i);
    this.data.quantity[i]--;
    console.log(this.data.quantity[i]--);
  }
  addQuantity(i){
    console.log(i);
    this.data.quantity[i]++;
    console.log(this.data.quantity[i]++);
  }
addMenu(){
  console.log(this.data);
}

Thanks in advance

Solution

I found the issue in your code. If you want to add dynamically create array then you need to initialize default values of array of object.

like

size = [];

this is the resultant array you need to finalize. You have a UI data which the object has some properties.

like

{ weight: 0,
  quantity: 0,
  price: 0,
 }

Now your object is ready to push into the size array.

when you click on

add() {
 this.size.push({ weight: 0,
  quantity: 0,
  price: 0,
 });
}

function, Just push this object every time. In angular UI new object with new values will create. No need to worry about any other complex logic.

I'm providing you a full solution. you can add multiple items at the same time I test it. If you need any help from my site just let me know. thank this is the link of solution.

cheers.

Answered By - Hassan Ali