是否可以在 Angular 6 中使用 ngFor 更新对象键的值

Question

通过使用 API 响应使用 ngFor 创建 dom 个元素，如下所示。

HTML

 <div class="col-sm-2 p-1 eventDiv ripple-container" *ngFor="let actProd of actProdList;let i = index">
    <mat-card  matRipple class="p-0">
        <div class="d-flex justify-content-center mt-2">
        <div class="w-100 ProductPrice d-flex justify-content-center">{{actProd?.PRICE}}<span class="pl-1" [innerHtml]="mCurrencyCode"></span></div>

        <button type="button" (click)="decrement(actProd?.CODE,i)" class="btnStyles">–</button>
        <input type="text" #TotalCartCount readonly class="quantityBox" value="{{mItemCount}}">
        <button type="button" (click)="increment(actProd?.CODE,i)" class="btnStyles">+</button>
        </div>
    </mat-card>
</div>

打字稿

increment(ItemId:number,index:number) {
    this.mItemCount += 1;
  }

我想做的是，当用户点击“+”按钮时我需要更新价格。如何在不刷新 dom.

的情况下实现这一点

Answer 1

在您的情况下，创建两个新属性可能会更好。一种是产品数量，另一种是根据数量变化的总价。尝试以下

控制器

export class AppComponent  {
  name = 'Angular';
  mItemCount = 1;
  actProdList = [
    { 'CODE': 1, 'PRICE': 25 },
    { 'CODE': 2, 'PRICE': 99 },
    { 'CODE': 3, 'PRICE': 100 },
    { 'CODE': 4, 'PRICE': 300 },
    { 'CODE': 5, 'PRICE': 12 }
  ];
  mCurrencyCode = '&#36;';

  constructor() {
    this.actProdList.forEach(product => {     // <- create new properties here
      product['quantity'] = 0;
      product['totalPrice'] = 0;
    });
  }

  increment(ItemId: number, index: number) {
    this.actProdList[index]['quantity'] += 1;
    this.actProdList[index]['totalPrice'] = this.actProdList[index]['PRICE'] * this.actProdList[index]['quantity'];
  }

  decrement(ItemId: number, index: number) {
    this.actProdList[index]['quantity'] -= 1;
    this.actProdList[index]['totalPrice'] = this.actProdList[index]['PRICE'] * this.actProdList[index]['quantity'];
  }
}

模板

<div class="col-sm-2 p-1 eventDiv ripple-container" *ngFor="let actProd of actProdList;let i = index">
  <div class="d-flex justify-content-center mt-2">
    <div class="w-100 ProductPrice d-flex justify-content-center">{{actProd?.totalPrice}} <span class="pl-1" [innerHtml]="mCurrencyCode"></span></div>

    <button type="button" (click)="decrement(actProd?.CODE,i)" class="btnStyles">–</button>
    <input type="text" #TotalCartCount readonly class="quantityBox" value="{{actProd?.quantity}}">
    <button type="button" (click)="increment(actProd?.CODE,i)" class="btnStyles">+</button>
  </div>
</div>

工作示例：Stackblitz

是否可以在 Angular 6 中使用 ngFor 更新对象键的值

Is it possible to update a value of an object key iterated using ngFor in Angular 6

angular

typescript

ngfor