Question

我有一堆席卡，它们是通过可观察到的数据显示出来的，如下所示。这个可观察的cars$将在可用时发出一个新的汽车对象，从而自动出现一个新的垫卡。有没有办法突出显示这个新添加的席卡，以提高可用性？有没有可用的角度为6或材质为角度的方法？

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

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

突出显示新添加的席卡

1 个答案: