如何设置环状垫卡的活动颜色?
How to set active color of looped mat-cards?
我有一张环状垫卡。如何设置我点击的卡片的活动颜色?
<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>
在*component.ts
中创建一个变量activeTenantId
并点击添加当前选择的tenantId到这个变量并添加动态class
示例
<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
}
我有一张环状垫卡。如何设置我点击的卡片的活动颜色?
<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>
在*component.ts
中创建一个变量activeTenantId
并点击添加当前选择的tenantId到这个变量并添加动态class
示例
<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
}