当我使用双向绑定以进行数量时，如何避免更改另一个文本框？

Question

我在垫子卡上使用 *ngfor，因此它将从我的书籍表中检索所有数据。我还在卡上添加了一个文本框，以便用户可以输入数量。我在文本框上使用了双向绑定。我的问题是，当我更改文本框上的数量时，所有文本框也会更改。我如何避免这种情况发生？请参阅下图：

这是我的代码：

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>&#8369;{{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");
      }
    );
  }
  

Answer 1

之所以发生，是因为属性this.quantity在所有卡上使用让obs的卡 - 它们都引用相同的道具。

取而代之的是，您可以用[（ngmodel）] =“ card？Quantity”在每个单独的卡上绑定到prop 。

并在formValue相应地更改数量：book.quantity。

在命名OBJ时尝试保持一致，那么它是book还是card？祝你好运！

---

其他选项是使用模板变量。我们从参考#MyInput中获取输入值，然后将其传递给方法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");
      }
    );
  }