angular - Mat-icon：当按下一个按钮时，所有的图标都会改变

Question

我正在使用 Mat-card 使用数组和 *ngFor 显示列表，当按下按钮时，它只会更改所选卡上的图标（mat-icon），但它会更改列表中的所有按钮。

这是一个例子：

在按下按钮之前，更改图标的条件为假

但是当我按下它时，所有的图标都会改变。

这是我的代码：

<mat-card  *ngFor="let a of items ;let i = index" class="item-card mat-card">

        <mat-card-header class="card-mat-header" style="margin-top: 10px;">
          <div class="card-mat-header-text"></div>

          <mat-card-title class="card-mat-title">{{a.name}}</mat-card-title>
          <mat-card-subtitle>Price :{{a.price}}</mat-card-subtitle>
        </mat-card-header>
        <div class="img-wrapper">      
            <img class="mat-card-image"  src={{a.image}} alt="Photo of a Shiba Inu">

        </div>
        <mat-card-content>
          <p>
            {{a.desc}}
          </p>
        </mat-card-content>

        <mat-card-actions class="right-button" >
          <button  mat-button class="mat-button mat-button-base" (click)="itemStatus(i)" > 
            <mat-icon>{{iconName}}</mat-icon>{{itemStatis}} {{a.addedToCart}}
          </button>

        </mat-card-actions>
      </mat-card>

还有使用的功能：

  itemStatus(i){

      this.items[i].addedToCart =  !this.items[i].addedToCart
      if(this.items[i].addedToCart)
      {
        this.iconName = "shopping_cart";
        this.itemStatis= "Added";
      }
      else{
        this.iconName = "add_shopping_cart";
        this.itemStatis= "Add To Cart";
      }
    }

如果有人熟悉这种错误，请帮助我。

Answer 1

您将 iconNameand维护itemStatis在组件级别而不是级别item

检查下面的示例

https://stackblitz.com/edit/angular-ivy-moun8k

在 XComponent.ts 中更改itemStatus为

itemStatus(i){
  this.items[i].addedToCart =  !this.items[i].addedToCart
}

在 HTML 中将 Button 部分更改为

<button  mat-button class="mat-button mat-button-base" (click)="itemStatus(i)" > 
  <mat-icon>{{a.addedToCart ? 'shopping_cart' : 'add_shopping_cart'}}</mat-icon>
    {{a.addedToCart ? 'Added' : 'Add To Cart'}} 
</button>