突出显示新添加的垫卡答案

【问题标题】：Highlighting a newly added mat-card突出显示新添加的垫卡
【发布时间】：2018-09-07 01:57:23
【问题描述】：

我有一堆 mat-cards 通过 observable 传入的数据显示，如下所示。这个可观察的cars$ 将在可用时发出一个新的汽车对象，从而自动出现一个新的垫卡。有没有办法突出这个新添加的 mat-card 以获得更好的可用性？有没有 angular 6 或 material-angular 可用的方法？

<mat-grid-tile *ngFor="let car of (cars$ | async)">
      <mat-card>
        <mat-card-header>
          <mat-card-title>
            ...
          </mat-card-title>
        </mat-card-header>
        <mat-card-content class="dashboard-card-content">
          ...
        </mat-card-content>
      </mat-card>
</mat-grid-tile>

【问题讨论】：

标签： angular angular-material

【解决方案1】：

我认为这样的事情可能会奏效

.ts

cars$;
lastCar;

ngOnInit() {
   cars$ = this.myService.getCards().pipe(
      tap(car => this.lastCar = car)
   );
}

html

<mat-grid-tile *ngFor="let car of (cars$ | async)">
      <mat-card [ngClass]="{ 'selected': lastCar === car }">
        <mat-card-header>
          <mat-card-title>
            ...
          </mat-card-title>
        </mat-card-header>
        <mat-card-content class="dashboard-card-content">
          ...
        </mat-card-content>
      </mat-card>
</mat-grid-tile>

【讨论】：