Angular中MatTable时长列每秒更新问题求助（无需全量刷新）

核心思路是通过Observable+Async管道实现当前时间的自动更新，配合纯管道处理时长转换，既保证每秒刷新显示，又不会触发全量数据源请求，同时避免不必要的性能损耗。

步骤1：将当前时间改为Observable流 #

把组件中的currentDateTime替换成Observable，利用timer每秒生成新的日期对象，Angular会自动追踪这个流的变化：

// 组件TS文件
import { timer, Observable } from 'rxjs';
import { map } from 'rxjs/operators';

// 替换原来的currentDateTime变量
currentDateTime$: Observable<Date> = timer(0, 1000).pipe(
  map(() => new Date())
);

步骤2：创建纯管道处理时长转换 #

将时长转换逻辑封装成纯管道，只有当输入的起始/结束时间变化时才会重新计算，避免模板中调用方法导致的重复执行：

// duration.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'duration',
  pure: true
})
export class DurationPipe implements PipeTransform {
  transform(startTime: string | Date, stopTime: string | Date): string {
    const start = new Date(startTime);
    const stop = new Date(stopTime);
    const diff = stop.getTime() - start.getTime();

    if (diff < 0) return '--:--:--';

    const seconds = Math.floor((diff / 1000) % 60);
    const minutes = Math.floor((diff / 1000 / 60) % 60);
    const hours = Math.floor((diff / 1000 / 60 / 60) % 24);

    return `${this.pad(hours, 2)}:${this.pad(minutes, 2)}:${this.pad(seconds, 2)}`;
  }

  private pad(num: number, length: number): string {
    return num.toString().padStart(length, '0');
  }
}

记得在对应NgModule的declarations数组中声明这个管道。

步骤3：修改模板，使用Async管道和自定义管道 #

用async管道订阅currentDateTime$，同时用duration管道处理时长显示，模板代码更简洁且性能更优：

<ng-template #pastPresentRow>
  <div *ngIf="(element.toDate | date: 'yyyy/MM/dd HH:mm:ss') < ((currentDateTime$ | async) | date: 'yyyy/MM/dd HH:mm:ss'); then pastRow; else presentRow">
  </div>
  <ng-template #pastRow>
    {{ element.bookingInfo.startChargingTime | duration: element.bookingInfo.stopChargingTime }}
  </ng-template>
  <ng-template #presentRow>
    <div *ngIf="element.isBookingActive; then ongoingRow; else waitingRow">
    </div>
    <ng-template #ongoingRow>
      {{ element.bookingInfo.startChargingTime | duration: (currentDateTime$ | async) }}
    </ng-template>
    <ng-template #waitingRow>
      --:--:--
    </ng-template>
  </ng-template>
</ng-template>

步骤4：清理冗余代码 #

删除原来的everyFiveSeconds订阅和相关变量，因为async管道会自动管理订阅生命周期，避免内存泄漏：

// 移除以下代码：
// subscription: Subscription;
// everyFiveSeconds: Observable<number> = timer(0, 1000);
// this.subscription = this.everyFiveSeconds.subscribe(() => {
//   this.dataSource.paginator = this.paginator
// });

关键优势 #

• 无需全量刷新数据源：仅更新当前时间流，不会触发数据源的重新请求或分页器重置。
• 性能优化：纯管道仅在输入变化时执行计算，避免模板方法的重复调用。
• 自动订阅管理：async管道自动处理订阅和取消订阅，减少内存泄漏风险。

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