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

将所有答案放在一起加上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 }}

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

Answer 3

从PierreDuc's answer开始，如果你想用前导零（例如00:01）填充分钟/秒，你可以使用ES2017 padStart方法：

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

Answer 4

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

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'

Answer 5

情况1 int = 100输出01:40
  情况2 int = 50输出00:50
  情况3 int = 125输出= 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 6

使用francisco-danconia's answer，我得到 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 7

Angular Date Pipe也可以使用数字值，但请注意，以毫秒为单位如果您想获得super.onCreate()，则需要计算00:00，就像这样

3600 * 1000

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

也许有人会派上用场

格式化的秒数为mm：ss在Angular 2中

7 个答案: