Мат-иконка: при нажатии на кнопку меняются все иконки

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

Вы поддерживаете iconName и itemStatis на уровне компонентов не на уровне item

См. Пример ниже

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

В XComponent.ts измените itemStatus на

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

In HTML измените раздел кнопок на

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