将秒数格式化为 mm:ss in Angular 2

Question

我正在显示从 3600 倒数到 0 的秒数。

<div class="time-box" *ngIf="p.value.playerTimer > 0">{{ p.value.playerTimer }}</div>

我想将秒数格式化为分:秒

我希望能够使用 DatePipe - https://angular.io/api/common/DatePipe

<div class="time-box" *ngIf="p.value.playerTimer > 0">{{ p.value.playerTimer | date:'mmss' }}</div>

但这不起作用，因为它希望 p.value.playerTimer 成为日期对象或自纪元以来的秒数。

还有其他方法可以实现吗？

Answer 1

你得自己写管道。像这样的东西。但请注意，它未经测试，并且没有考虑它可能收到的任何奇怪输入。它也没有任何前导零，但是嘿，现在你也有事情要做了：

@Pipe({
  name: 'minuteSeconds'
})
export class MinuteSecondsPipe implements PipeTransform {

    transform(value: number): string {
       const minutes: number = Math.floor(value / 60);
       return minutes + ':' + (value - minutes * 60);
    }

}

Answer 2

根据，如果你想用前导零填充minutes/seconds（例如00:01），你可以使用ES2017 padStart方法：

return minutes.toString().padStart(2, '0') + ':' + (value - minutes * 60).toString().padStart(2, '0');

Answer 3

将所有答案放在一起并在 HTML 中使用示例：

来自 markau 和 PierreDuc：

@Pipe({
  name: 'minuteSeconds'
})
export class MinuteSecondsPipe implements PipeTransform {

    transform(value: number): string {
       const minutes: number = Math.floor(value / 60);
       return minutes.toString().padStart(2, '0') + ':' + 
           (value - minutes * 60).toString().padStart(2, '0');
    }
}

然后在你的html中：

<div ...>{{ p.value.playerTimer | minuteSeconds }}</div>

例如，如果 p.value.playerTimer = 127，它将显示 02:07

Answer 4

case 1 int = 100 output 01:40
case 2 int = 50 output 00:50
case 3 int = 125 output = 02:05

transform(value: number, args?: any): string {

    const hours: number = Math.floor(value / 60);
    const minutes: number = (value - hours * 60);

    if (hours < 10 && minutes < 10) {
        return '0' + hours + ' : 0' + (value - hours * 60);
    }
    if (hours > 10 && minutes > 10) {
        return '0' + hours + ' : ' + (value - hours * 60);
    }
    if (hours > 10 && minutes < 10) {
        return hours + ' : 0' + (value - hours * 60);
    }
    if (minutes > 10) {
        return '0' + hours + ' : ' + (value - hours * 60);
    }
}

Answer 5

使用，我得到 mm:ss 作为 ==> 04:58.69999999999999 .所以我稍微修改了代码如下。我现在按预期得到 04:58。

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

@Pipe({
    name: 'minuteSeconds'
  })
  export class MinuteSecondsPipe implements PipeTransform {

      transform(value: number): string {
         const minutes: number = Math.floor(value / 60);
         return minutes.toString().padStart(2, '0') + ':' + 
         Math.floor((value - minutes * 60)).toString().padStart(2, '0');
      }
  }

Answer 6

Angular 日期管道也适用于数字值， 但请注意：只有毫秒.

如果你想获得 mm:ss(00:00) 你需要将你的数字值转换为毫秒。在您的情况下，它应该是：3600 * 1000

<div class="time-box" *ngIf="p.value.playerTimer > 0">
    {{ p.value.playerTimer * 1000 | date:'mm:ss' }}
</div>

这是 Stackblitz 示例 https://stackblitz.com/edit/date-pipe-example-nhafvx

说不定有人会派上用场

Answer 7

对于任何寻找更进一步并支持小时的答案的人：

const toHoursMinutesSeconds = totalSeconds => {
  const hours = Math.floor(totalSeconds / 3600);
  const minutes = Math.floor((totalSeconds % 3600) / 60);
  const seconds = totalSeconds % 60;
  let result = `${minutes
    .toString()
    .padStart(1, '0')}:${seconds.toString().padStart(2, '0')}`;
  if (!!hours) {
    result = `${hours.toString()}:${minutes
      .toString()
      .padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
  }
  return result;
};

生产：

toHoursMinutesSeconds(55);
'0:55'
toHoursMinutesSeconds(679);
'11:19'
toHoursMinutesSeconds(12345);
'3:25:45'
toHoursMinutesSeconds(123456);
'34:17:36'

将秒数格式化为 mm:ss in Angular 2

Format number of seconds as mm:ss in Angular 2

angular2-template

angular