Currently, I am using *ngFor within my mat-card to display data from my book table. I have also included a textbox on each card for users to input the quantity they wish to purchase. To achieve this, I utilized two-way binding on the textboxes. However, I encountered an issue where changing the quantity in one textbox affects all the other textboxes as well. How can I prevent this from happening? You can refer to the image below:
https://i.sstatic.net/81Mnm.jpg
Below is a snippet of my code:
store.component.html
<div class="card-container">
<mat-card *ngFor="let card of obs | async; let i = index" class="mt-3">
<img mat-card-image src="{{card.bookimage}}" width="100" height="200">
<mat-card-header>
<mat-card-title>{{card.bookname}}</mat-card-title>
<mat-card-subtitle>₱{{card.bookprice.toFixed(2)}}<span *ngIf="card.bookunitstock === 0" class="status text-white bg-danger mx-2">Out of Stock</span></mat-card-subtitle>
</mat-card-header>
<mat-card-actions>
<input type="number" [(ngModel)]="quantity" name="quantity">
<button mat-raised-button color="primary" (click)="onAddToCartProduct(card)"><mat-icon class="me-2">add_shopping_cart</mat-icon>Add to cart</button>
</mat-card-actions>
</mat-card>
</div>
store.component.ts
public onAddToCartProduct(book: Book): void {
const formValue = {
bookid: book.bookid,
bookimage: book.bookimage,
bookname: book.bookname,
bookprice: book.bookprice,
bookstatus: book.bookstatus,
cartitemid: 0,
category: "Fantasy",
checkoutstatus: true,
isbn: book.isbn,
quantity: this.quantity,
sku: book.sku,
totalprice: book.bookprice * this.quantity,
user_userid: 4
}
console.log(formValue);
this.storeService.addCartProduct(formValue).subscribe(
(response: Store) => {
this.products.push(formValue);
this.grandTotal += (formValue.quantity * formValue.bookprice);
this.successMessage("added");
},
(error: HttpErrorResponse) => {
this.errorMessage("Out -of Stock");
}
);
}