angular - Conversia minutelor în ore într-un component sau pipe Angular2


În aplicația mea, valoarea duratei este stocată în minute în partea de back end și datele sunt afișate în front end astfel încât, dacă valoarea duratei este sub 1 oră, să fie afișată în minute, iar aceeași valoare să fie egală sau peste 1 oră, să fie afișată în ore.

<strong *ngIf="event.eventDuration > 0 && event.eventDuration/60 < 1">{{event.eventDuration}} Minutes<br/></strong>
<strong *ngIf="event.eventDuration > 0 && event.eventDuration/60 >= 1">{{event.eventDuration/60}} Hour(s)<br/></strong>

Este aceasta cea mai bună metodă sau să scriem o funcție de componentă și să returnăm valoarea din funcție? De asemenea, funcțiile componentelor sunt apelate de prea multe ori dacă le apelăm dintr-un atribut al elementului.

Răspuns #1

Aș crea o conductă ca aceasta...

@Pipe({
  name: 'myTime'
})
export class MyTimePipe implements PipeTransform {
  transform(value: number): string {
     if(value > 0 && value/60 < 1) {
       return value + ' Minutes';

     } else {
       return value/60 + ' Hour(s)';
     }
  }
}

și folosește-l în șablonul tău astfel:

{{event.eventDuration | myTime}}

Răspunsul #2

O altă modalitate fără a folosi PIPE

    transformMinute(value: number): string {
    let hours = Math.floor(value / 60);
    let minutes = Math.floor(value % 60);
    return hours + ' hrs ' + minutes + ' mins';
  }

la HTML

{{transformMinute(event.eventDuration)}}