javascript - 当前元素的角度onclick切换书签图标样式

正在尝试为当前元素onclick切换书签图标颜色，但是它已应用于所有书签图标

<div *ngFor="let product of products">
    <mat-card class="col-md-3">
        <img style="height:100%; width: 100%;" src="{{ product.imageUrl }}" />
        <div class="card-body">
            <mat-card-title>{{product.name}}</mat-card-title>
            <mat-card-content>
                <p>{{product.description}}</p>
            </mat-card-content>
            <mat-card-subtitle>&#8377; {{product.price}}</mat-card-subtitle>
            <mat-card-actions>
                <button mat-flat-button color="primary" style="margin-right: 7px;"> Add to Bag </button>
                <button mat-icon-button aria-label="Example icon-button with a heart icon"
                    (click)="clickEvent($event)" style="float: right;">
                    <mat-icon [ngClass]="status ? 'bookmark' : 'bookmarked'">favorite</mat-icon>
                </button>
            </mat-card-actions>
        </div>
    </mat-card>
</div>

TS

status: boolean = false;
private clickEvent() {
    this.status = !this.status;
}

谢谢

最佳答案

那是因为您为每个项目都使用了一个变量。为products数组中的每个项目创建一个状态键（如下所示的示例）

<button mat-icon-button (click)="product.status = !product.status" style="float: right;">
  <mat-icon [ngClass]="product.status ? 'bookmark' : 'bookmarked'">favorite</mat-icon>
</button>