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

Question

我正在尝试切换当前元素 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;
}

谢谢

Answer 1

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

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