web-dev-qa-db-fra.com

Formater le nombre de secondes en mm: ss dans Angular 2

J'affiche un nombre de secondes qui passe de 3600 à 0.

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

Je voudrais formater le nombre de secondes comme - minutes: secondes

J'espérais pouvoir utiliser DatePipe - https://angular.io/api/common/DatePipe

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

Mais cela ne fonctionne pas car il s'attend à ce que p.value.playerTimer soit un objet de date ou un nombre de secondes depuis l'époque. 

Y a-t-il un autre moyen d'y parvenir?

angularangular2-template
6
Chris

Vous devez écrire votre propre pipe. Quelque chose comme ça. Sachez cependant que cela n’a pas été testé et qu’il ne tient pas compte des données étranges qu’il pourrait recevoir. En outre, il n'a pas de zéros à gauche, mais bon, maintenant vous avez quelque chose à faire aussi:

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

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

}
13
PierreDuc

Pour regrouper toutes les réponses plus un exemple d'utilisation en HTML:

De Markau et 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');
    }
}

Puis dans votre html: 

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

Ainsi, par exemple, si p.value.playerTimer = 127, il affichera 02:07

5
Francisco d'Anconia

Suite de Réponse de PierreDuc , si vous souhaitez régler les minutes/secondes avec un zéro (par exemple 00:01), vous pouvez utiliser la méthode ES2017 padStart:

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

2
markau

case 1 int = 100 sortie 01:40
case 2 int = 50 sortie 00:50
cas 3 int = 125 sortie = 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);
    }
}
1
Ahmed

En utilisant la réponse de francisco-danconia , je recevais le mm: ss en tant que ==> 04: 58.69999999999999 . J'ai donc légèrement modifié le code comme suit. Je reçois maintenant 04:58 comme prévu.

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');
      }
  }
0
Nikhil