0
181
Views¿Cómo puedo evitar cambiar otro cuadro de texto cuando uso el enlace bidireccional para la cantidad?
Estoy usando *ngFor en mi mat-card para que recupere todos los datos de mi tabla de libros. También agrego un cuadro de texto en mi tarjeta para que el usuario pueda ingresar la cantidad. Usé el enlace bidireccional en mi cuadro de texto. Mi problema es que cuando cambié la cantidad en el cuadro de texto, también se cambiaron todos los cuadros de texto. ¿Cómo puedo evitar que esto suceda? Vea la imagen a continuación:
Aquí está mi código:
tienda.componente.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"); } ); }1 answers
Answer question0
Sucede porque la propiedad this.quantity se usa en todas las tarjetas let card of obs : todas hacen referencia al mismo accesorio.
En su lugar, podría vincular la quantity de accesorios en cada tarjeta individual con [(ngModel)]="card?.quantity" .
Y en formValue cambie en consecuencia quantity: book.quantity .
Trate de mantener la coherencia al nombrar objetos, ¿es un book o una card ? ¡Buena suerte!
Otra opción sería usar la variable de plantilla. Tomamos el valor de input de la referencia #myInput y lo pasamos al método onAddToCartProduct() .
<mat-card-actions> <input type="number" #myInput name="quantity"> <button mat-raised-button color="primary" (click)="onAddToCartProduct(card, myInput.value)"><mat-icon class="me-2">add_shopping_cart</mat-icon>Add to cart</button> </mat-card-actions> public onAddToCartProduct(book: Book, inputValue: number): 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: inputValue, // <----- sku: book.sku, totalprice: book.bookprice * inputValue, // <----- 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"); } ); }