Question

在我的应用程序中，在后端存储持续时间值（以分钟为单位），如果持续时间值低于1小时（以分钟为单位）并且相同的值等于1小时以上，则在前端显示数据。

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

这是最好的方法还是编写组件功能并从函数返回值？如果我们从元素属性调用，组件函数也会调用太多次。

Answer 1

我会像这样创建一个管道......

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

并在模板中使用它，如下所示：

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

不使用PIPE的另一种方法

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

使用HTML

{{transformMinute(event.eventDuration)}}

在angular2组件或管道中将分钟转换为小时

3 个答案: