如何在Angular的mat卡中添加阴影？

Question

我有一张席位卡列表，想知道如何仅在选定的卡上添加阴影。因此，在“编辑”页面中，我添加了mc-workspace-card组件，它向我显示了所有卡片。

HTML

   <mc-workspace-card *ngFor="let workspace of workspaces" [workspace]="workspace" (click)="copy(workspace)">
            </mc-workspace-card>

TS

  copy(workspace: Workspace) {
    this.copying = true;
    this.chartService.copyChartToWorkspace(this.chartGuid, workspace.guid).subscribe(newChart => {
      this.copying = false;
      this._snackBar.open(`Chart has been copied to ${workspace.name}`, 'Check it out!', { duration: 5000 }).onAction().subscribe(() => {
        this.router.navigateByUrl('/workspace/' + workspace.guid);
        this.dialogRef.close();
      })
    })
  }

我尝试将其添加到我的HTML标记中，但没有将阴影仅应用到选定的卡上，而是将其应用到页面上的所有卡上。

    [class.mat-elevation-z2]="!isActive"
    (click)="isActive = !isActive"
    [class.mat-elevation-z8]="isActive">

任何帮助或建议将不胜感激。

Answer 1

您可以在卡中使用[ngClass]指令，

<mc-workspace-card 
  *ngFor="let workspace of workspaces" 
  [workspace]="workspace" 
  (click)="copy(workspace)"
  [ngClass]="{'mat-elevation-z2': !isActive, 'mat-elevation-z8': isActive}">

</mc-workspace-card>