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

Posted 2023-04-19

【中文标题】Mat-icon：当按下一个按钮时，所有的图标都会改变

【英文标题】：Mat-icon: when pressing a button all the icons change

【发布时间】：2020-09-16 11:56:39

【问题描述】：

我正在使用 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 >

        </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";
      
    

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

【参考方案1】：

您在组件级别维护iconName 和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>

【讨论】：

在 html 文件中？但它在 *ngfor 循环内？

我正在创建一个示例，给我 5 分钟

谢谢它确实有效，我以前从未使用过这种方法。

乐于助人，在 html 中， 中的内容是上下文感知和可评估的