更新 *ngFor Angular 上的变量

Question

我有一个 *ngFor，我正尝试在点击时更新一个 {{subtotal}} 标签，但它更新了所有具有相同值的项目。 {{quantity}} 也是如此。有没有办法创建局部变量？这是我的代码

html

 <CardView class="cardStyle" *ngFor="let card of shoppingCart; let i = index;">

  <Label text="{{card?.product.productName}}" textWrap="false" class="product-title " row="1" col="0"></Label>

  <Label text="Quantity:{{quantity}}" textWrap="true" col="1" row="2" class="product-quantia" ></Label>

  <Label text="subtotal:{{subtotal}}" textWrap="true" col="1" row="2" class="product-quantia" ></Label>

  <Button text="&#xf056;" class="item-share-shop-save" (tap)="increase(card, i)" ></Button>

 </CardView>

我的 ts 组件

 subtotalResult:any = null;
 quantity: any;

increase(card:any, id:number){

   card.quantity += 1;
   this.subtotalResult = card.quantity * card.unitPrice; 

}

Answer 1

由于您有 quantity 和 subtotalResult 作为全局项，更改 1 个项就是修改所有项。

如果每个项目都将它们设为数组。

这样试试：

HTML:

<Label text="Quantity:{{quantity[i]}}" textWrap="true" col="1" row="2" class="product-quantia" ></Label>

<Label text="subtotal:{{subtotal[i]}}" textWrap="true" col="1" row="2" class="product-quantia" ></Label>

打字稿：

 subtotalResult: any[] = [];

  increase(card: any, index: any) {

    card.quantity += 1;
    this.subtotalResult[index] = card.quantity * card.unitPrice;

  }

分叉 stackbiltz

Answer 2

这种事情最好用响应式表单来做，但是因为你没有输入字段，所以你可以将其保留为模板驱动表单。

在创建 "shoppingCart" 时，我根据您的 api 假设，您需要遍历数组中的每个项目并确保数量和小计的值以 ie 开头每个项目 quantity:0 和 subtotal:0。然后下面的模板将起作用：

<CardView class="cardStyle" *ngFor="let card of shoppingCart; let i = index;">

  <Label text="{{card?.product.productName}}" textWrap="false" class="product-title " row="1" col="0"></Label>

  <Label text="Quantity:{{card?.quantity}}" textWrap="true" col="1" row="2" class="product-quantia" ></Label>

  <Label text="subtotal:{{card?.subtotal}}" textWrap="true" col="1" row="2" class="product-quantia" ></Label>

  <Button text="&#xf056;" class="item-share-shop-save" (tap)="increase(card, i)" ></Button>

 </CardView>

然后在你的 increase 函数中：

increase(card: any, index: any) {

    shoppingCart[index].quantity += 1;
    shoppingCart[index].subtotal = card.subtotal * card.quantity 

  }

您始终需要更新 "shoppingCart"，因为在您只是更新参考之前，该参考不会执行任何操作，因为您的模板基于 "shoppingCart"。

更新 *ngFor Angular 上的变量

Update variable on *ngFor Angular

angular

angular5

angular6

angular8