Angular Material Table数据变更时的行动画实现需求咨询

这个需求我之前做类似赛事数据更新时也遇到过，核心就是两步：跟踪哪些条目发生了变更，然后给这些条目绑定动画样式。下面一步步来实现：

1. 改造DataSource，跟踪变更条目 #

你的DataSource原本只负责提供数据，现在需要新增逻辑对比新旧数据，找出发生变更的条目ID，再通过Observable通知组件。这里以Firestore的snapshotChanges为例：

import { DataSource } from '@angular/cdk/collections';
import { Observable, BehaviorSubject } from 'rxjs';
import { map, tap } from 'rxjs/operators';
import { AngularFirestore } from '@angular/fire/compat/firestore';

export class MatchDataSource extends DataSource<any> {
  private dataSubject = new BehaviorSubject<any[]>([]);
  // 用来推送变更的条目ID，供组件订阅
  public updatedMatchIds$ = new BehaviorSubject<string[]>([]);
  private isFirstLoad = true; // 标记首次加载，避免初始数据全部闪烁

  constructor(private firestore: AngularFirestore) {
    super();
  }

  connect(): Observable<any[]> {
    return this.firestore.collection('premier-league-matches').snapshotChanges().pipe(
      map(snapshots => snapshots.map(snap => ({
        id: snap.payload.doc.id,
        ...snap.payload.doc.data()
      }))),
      tap(newMatches => {
        // 首次加载直接更新数据，不触发高亮
        if (this.isFirstLoad) {
          this.isFirstLoad = false;
          this.dataSubject.next(newMatches);
          return;
        }

        const oldMatches = this.dataSubject.value;
        // 对比新旧数据，找出变更的赛事ID
        const updatedIds = newMatches.filter(newMatch => {
          const oldMatch = oldMatches.find(m => m.id === newMatch.id);
          // 这里可以根据业务字段对比（比如比分、状态），比JSON.stringify更高效
          return !oldMatch || oldMatch.homeScore !== newMatch.homeScore || oldMatch.awayScore !== newMatch.awayScore;
        }).map(match => match.id);

        if (updatedIds.length > 0) {
          this.updatedMatchIds$.next(updatedIds);
        }
        this.dataSubject.next(newMatches);
      })
    );
  }

  disconnect() {
    this.dataSubject.complete();
    this.updatedMatchIds$.complete();
  }
}

2. 组件中处理高亮状态 #

在表格组件里订阅DataSource推送的变更ID，用Set维护需要高亮的条目，设置定时器自动移除高亮状态：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { MatchDataSource } from './match-data-source';
import { Subscription, timer } from 'rxjs';

@Component({
  selector: 'app-match-table',
  templateUrl: './match-table.component.html',
  styleUrls: ['./match-table.component.css']
})
export class MatchTableComponent implements OnInit, OnDestroy {
  dataSource: MatchDataSource;
  displayedColumns = ['homeTeam', 'awayTeam', 'score', 'status'];
  private highlightedMatchIds = new Set<string>();
  private subscriptions: Subscription[] = [];

  constructor(private matchDataSource: MatchDataSource) {}

  ngOnInit() {
    this.dataSource = this.matchDataSource;
    // 订阅变更ID，添加高亮并定时移除
    const updateSub = this.dataSource.updatedMatchIds$.subscribe(ids => {
      ids.forEach(id => {
        this.highlightedMatchIds.add(id);
        // 3秒后取消高亮，时长可根据需求调整
        const timerSub = timer(3000).subscribe(() => {
          this.highlightedMatchIds.delete(id);
        });
        this.subscriptions.push(timerSub);
      });
    });
    this.subscriptions.push(updateSub);
  }

  ngOnDestroy() {
    // 清理所有订阅，避免内存泄漏
    this.subscriptions.forEach(sub => sub.unsubscribe());
  }

  isMatchHighlighted(id: string) {
    return this.highlightedMatchIds.has(id);
  }
}

3. 模板绑定动态样式 #

在表格模板中，给每一行绑定高亮类：

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- 主队列 -->
  <ng-container matColumnDef="homeTeam">
    <th mat-header-cell *matHeaderCellDef> 主队 </th>
    <td mat-cell *matCellDef="let match"> {{match.homeTeam}} </td>
  </ng-container>

  <!-- 客队列 -->
  <ng-container matColumnDef="awayTeam">
    <th mat-header-cell *matHeaderCellDef> 客队 </th>
    <td mat-cell *matCellDef="let match"> {{match.awayTeam}} </td>
  </ng-container>

  <!-- 比分列 -->
  <ng-container matColumnDef="score">
    <th mat-header-cell *matHeaderCellDef> 比分 </th>
    <td mat-cell *matCellDef="let match"> {{match.homeScore}} - {{match.awayScore}} </td>
  </ng-container>

  <!-- 状态列 -->
  <ng-container matColumnDef="status">
    <th mat-header-cell *matHeaderCellDef> 状态 </th>
    <td mat-cell *matCellDef="let match"> {{match.status}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <!-- 给变更的行绑定高亮类 -->
  <tr mat-row *matRowDef="let row; columns: displayedColumns;" 
      [class.highlight-row]="isMatchHighlighted(row.id)"></tr>
</table>

4. 编写CSS闪烁动画 #

在组件样式里添加闪烁效果，两种可选方案：

/* 方案1：持续闪烁直到高亮状态移除 */
@keyframes blink {
  0% { background-color: rgba(255, 215, 0, 0.3); }
  50% { background-color: rgba(255, 215, 0, 0.8); }
  100% { background-color: rgba(255, 215, 0, 0.3); }
}

/* 方案2：闪烁3次后恢复原状 */
/* @keyframes blink {
  0%, 100% { background-color: transparent; }
  50% { background-color: rgba(255, 215, 0, 0.8); }
} */

.highlight-row {
  animation: blink 1s infinite;
  /* 如果用方案2，改成：animation: blink 0.5s ease-in-out 3 forwards; */
}

一些优化建议 #

• 数据对比逻辑：如果赛事字段很多，不要用JSON.stringify全量对比，直接对比业务上会变化的字段（比如比分、实时状态），提升性能。
• 批量更新处理：如果一次有多个条目变更，定时器可以合并处理，避免创建过多定时器。
• 动画样式：可以根据变更类型（比如比分更新、状态变更）设置不同的高亮颜色，让提示更精准。

内容的提问来源于stack exchange，提问作者Denis