每分钟更新一次单元格计时数据的 Angular 方式是什么？

问题描述

我的 Angular 9 mat-table 中有这个。这个单元格应该显示一个项目的创建时间......

<ng-container matColumnDef="date">
  <mat-header-cell *matHeaderCellDef> Posted on </mat-header-cell>
  <mat-cell *matCellDef="let item">{{ getCreatedOn(item) }} ago</mat-cell>
</ng-container>

在ts文件中，我使用的函数是这样的

  getCreatedOn(item: Item): string {
    const timeSince = (new Date()).getTime() - item.created_on_ms;
    return this.getTimeUnitAsstr(timeSince);
  }

问题是这些数据是静态的。也就是说，当页面第一次加载时，它可能会读取“37 分钟前”，但对于随后的每一分钟，我希望数据更新以显示“38 分钟前”、“39 分钟前”等等。每分钟更新这段特定数据的正确 Angular 方式是什么？

解决方法

最快捷的方式是使用ngx-moment来使用time ago pipe

请安装ngx-moment，然后以这种方式使用管道

<ng-container matColumnDef="date">
  <mat-header-cell *matHeaderCellDef> Posted on </mat-header-cell>
  <mat-cell *matCellDef="let item">{{ item.created_on_ms | amTimeAgo }} ago</mat-cell>
</ng-container>