Angular Mat图标：按下按钮时，所有图标都会更改

我正在使用Mat卡显示一个使用数组和*ngFor的列表，当按下按钮时，它将仅更改所选卡上的图标（Mat图标），但列表中所有按钮的图标都会更改

下面是一个例子：

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

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

这是我的密码：

<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>

---

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

您正在组件级维护

iconName

和

itemStatis

而不是

项目级维护
itemStatis

检查下面的示例


在XComponent.ts中将
项目状态更改为

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

<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>

在HTML中将按钮部分更改为

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

<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>


{{a.addedToCart？'shopping_cart'：'add_shopping_cart'}
{{a.addedToCart？'Added'：'AddtoCart'}
在Html文件中？但是它在*ngfor循环中？我正在创建一个示例，给我5分钟。谢谢你，它确实有效。我以前从未使用过这个方法。很高兴提供帮助，在html中，
{}
中的内容是上下文感知的，可评估的