Как установить активный цвет петлевых мат-карт?

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>

0

angular angular9 mat-card

Источник

user10860402 26 май '20 в 05:27

1 ответ

Решение

Другие вопросы по тегам angular angular9 mat-card

user11719787 26 май '20 в 05:32 2020-05-26 05:32 · Accepted Answer · 2020-05-26 05:32

Создать переменную activeTenantId в *component.ts и onclick добавить текущий выбранный 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
}