Angular中点击单个mat-card仅高亮该卡片而非全部的问题解决

问题出在你用了一个全局的barStyle变量控制所有卡片的样式——当你点击任意卡片时，这个变量的值会切换，导致所有绑定它的卡片都跟着改变样式。要实现单个卡片独立高亮，我们需要给每个卡片维护自己的选中状态：

步骤1：在组件TS中添加选中卡片的状态变量 #

首先，在你的组件类里新增一个变量来存储当前选中的卡片：

selectedCard: any; // 如果你的卡片有明确的类型，建议替换成对应的接口类型

步骤2：修改高亮方法，接收当前点击的卡片 #

更新highlightCard方法，让它接收点击的卡片作为参数，然后把选中状态设置为当前卡片（也可以添加点击已选中卡片取消高亮的逻辑）：

highlightCard(card: any) {
  // 点击已选中的卡片时取消高亮，若不需要取消可直接赋值this.selectedCard = card
  this.selectedCard = this.selectedCard === card ? null : card;
}

步骤3：修改模板，根据当前卡片是否选中绑定样式 #

把原来绑定全局barStyle的逻辑，改成判断当前循环的卡片是否等于selectedCard，从而动态应用样式：

<mat-card 
  [ngClass]="selectedCard === card ? 'cardHighlight' : 'card'"
  *ngFor="let card of obs | async | paginate: { id: 'paginator', itemsPerPage: 10, currentPage: currentPage, totalItems: totalItems }"
  (click)="highlightCard(card)"
>

这样修改后，每个卡片点击时只会更新自己的选中状态，模板会根据每个卡片是否是当前选中项来单独应用高亮样式，不会再出现所有卡片一起变色的问题了。

内容的提问来源于stack exchange，提问作者GDC