如何创建自定义管道以将 API 中的秒数据转换为小时和分钟数据

Question

如何在 angular 8 中制作自定义管道以将秒转换为小时和分钟。

谢谢。

<div class="col-2" *ngFor="let movie of moviesList">
  <div class="movie">
    {{ movie.attributes.title }}
    <img [src]="movie.thumbnails.small">
    {{ movie.attributes.duration }} <== second
  </div>
</div>

Answer 1

创建一个名称类似于 FormatTime

的管道

格式-time.pipes.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'formatTime'})
export class FormatTime implements PipeTransform {
  transform(value: number): string {
    return new Date(value * 1000).toISOString().substr(11, 8)
  }
}

导入并将其添加到模块中的声明中

...
import { FormatTime } from './format-time.pipes';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent, FormatTime ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

模板

<div class="col-2" *ngFor="let movie of moviesList">
  <div class="movie">
    {{ movie.attributes.title }}
    <img [src]="movie.thumbnails.small">
    {{ movie.attributes.duration | formatTime }}
  </div>
</div>

Answer 2

您可以像下面这样创建一个管道，

@Pipe({
    name: 'secondsTransform'
})
export class SecondsTransformPipe implements PipeTransform {
    constructor() {}

    transform(value: number): string {
        let minutes: number = Math.trunc(value/60);
        let hours: number = 0;
        let seconds: number = value - (minutes*60);

        if (minutes >= 60) {
          hours = Math.trunc(minutes/60);
          minutes = minutes - (hours*60);
        }

        let response: string = "";

        if (hours > 0) {
          response = response + hours + " hours ";
        } 

        if (minutes > 0) {
          response = response + minutes + " minutes ";
        }

        if (seconds > 0) {
          response = response + seconds + " seconds";
        }

        return response;
    }
}

导入模块中的管道并在html中使用它作为{{seconds|secondsTransform}}

您可以参考下面的示例，它使用管道显示 Hours/Minutes/Seconds 中的秒数， https://stackblitz.com/edit/angular-ivy-7jte9o

如何创建自定义管道以将 API 中的秒数据转换为小时和分钟数据

How create custome pipe to convert seconde to hours en minutes data from API

javascript

pipe

typescript

angular