时间戳

首页 > 解决方案 > 突出显示新添加的垫卡

angular - 突出显示新添加的垫卡

问题描述

我有一堆 mat-cards 通过 observable 传入的数据显示，如下所示。这个 observablecars$将在可用时发出一个新的 car 对象，从而自动出现一个新的 mat-card。有没有办法突出这个新添加的 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>

标签： angularangular-material

解决方案

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

.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>

推荐阅读