将 angular2 组件或 pipe 中的分钟转换为小时

Question

In my application storing the duration value in minutes in back end and displaying the data in front end if duration value is below 1 hour in minutes and the same value is equal to above 1 hour in hours.

<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>

Is this best way or write component function and return the value from the function? also component functions are calling too many times if we call from element attribute.

Answer 1

I would create a pipe like this...

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

and use it in your template as follows:

{{event.eventDuration | myTime}}

Answer 2

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'm2h'
})
export class MinutesToHours implements PipeTransform {
  transform(value: number): string {
    let hours = Math.floor(value / 60);
    let minutes = Math.floor(value % 60);
    return hours + ' hrs ' + minutes + ' mins';
  }
}

Answer 3

Another Way without using PIPE

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

at HTML

{{transformMinute(event.eventDuration)}}

Answer 4

TimeConversion(TimeValue: number): string {

    let hours = Math.floor(TimeValue/ 60);

    let minutes = Math.floor(TimeValue% 60);

    let seconds= Math.floor(TimeValue% 60);

    return hours + ':' + minutes + ':' + seconds ;
}

This will return ---> example: 5:25:12