angular - 如何设置循环垫卡的活动颜色？

Question

我有一张环形的垫卡。如何设置我点击的卡片的活动颜色？

<div>
  <ng-container *ngFor="let tenant of tenantData">
  <mat-card class="card-card" (click)="onCardClick(tenant.id)">
    <mat-card-header>
      <mat-card-title>{{tenant.tenantName}}</mat-card-title>
      <mat-card-subtitle>{{tenant.abbr}}</mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
      Tenant# {{tenant.id}}
    </mat-card-content>
  </mat-card>
</ng-container>
</div>

Answer 1

activeTenantId在中创建一个变量*component.ts并单击将当前选定的tenantId添加到此变量并添加动态类

例子

<div>
  <ng-container *ngFor="let tenant of tenantData">
  <mat-card class="card-card" [class.active-tenant]="tenant.id === activeTenantId" (click)="onCardClick(tenant.id)">
    <mat-card-header>
      <mat-card-title>{{tenant.tenantName}}</mat-card-title>
      <mat-card-subtitle>{{tenant.abbr}}</mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
      Tenant# {{tenant.id}}
    </mat-card-content>
  </mat-card>
</ng-container>
</div>

onCardClick(id) {
 activeTenantId = id; // <=== put your trigger here
}