Angular中如何将列表项duration属性的秒数转换为MM:SS时间格式

Angular场景下有两种常用实现方式，按需选择即可：

方案1：自定义管道（推荐，全局可复用） #

这种方式适合多个组件都需要用到时间格式化的场景，符合Angular的最佳实践。

1. 新建duration-format.pipe.ts管道文件，代码如下：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'durationFormat'
})
export class DurationFormatPipe implements PipeTransform {
  transform(seconds: number | string): string {
    const numSec = Number(seconds);
    // 处理非法值
    if (isNaN(numSec) || numSec < 0) return '00:00';
    const mins = Math.floor(numSec / 60);
    const secs = Math.floor(numSec % 60);
    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  }
}

2. 在当前组件所属的模块（或共享模块）的declarations数组中引入该管道：

// 示例：app.module.ts
import { DurationFormatPipe } from './pipes/duration-format.pipe';

@NgModule({
  declarations: [
    // 其他组件、管道
    DurationFormatPipe
  ]
})
export class AppModule { }

3. 修改模板代码，直接调用管道格式化：

<!-- 原duration展示部分替换为以下代码 -->
<p class="text-sm font-normal text-regulargray">
  {{ lessonData.duration | durationFormat }}
</p>

方案2：组件内新增转换方法（仅当前组件使用） #

如果只有当前组件需要用到该格式化逻辑，可以直接在组件内写方法实现，无需额外新建管道。

1. 修改组件代码，新增转换方法：

export class LessonCardComponent {
  public lesson$: Observable<ICourse> = this._store.select(selectSelectedCourse);

  constructor(private readonly _store: Store<AppState>, public dialog: MatDialog) {}

  // 新增时间格式化方法
  formatDuration(seconds: number | string): string {
    const numSec = Number(seconds);
    if (isNaN(numSec) || numSec < 0) return '00:00';
    const mins = Math.floor(numSec / 60);
    const secs = Math.floor(numSec % 60);
    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  }
}

2. 修改模板代码，调用组件方法：

<!-- 原duration展示部分替换为以下代码 -->
<p class="text-sm font-normal text-regulargray">
  {{ formatDuration(lessonData.duration) }}
</p>

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