Angular 管道pipe转换内容显示

abp接口中很多数据类型刷到前端都是string, 有些显示会出问题，例如timespan类型刷到angular后为string类型，显示的时候需要进行相关转换。其他数据类型都是类似的。

1. 建立管道, 对管道进行声明/导出
2. 创建timespan类用于属性匹配, 根据需要添加属性值
3. 根据需要在管道内进行格式化字符串

class TimeSpan {
  days: number;
  hours: number;
  minutes: number;
  seconds: number;
  milliseconds: number;
}

管道代码，我这里只需要时分秒：

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

@Pipe({ name: 'showTimeSpan' })
export class ShowTimeSpanPipe implements PipeTransform {
  transform(value: any, needHour = true, needMinute = true, needSecond = true): string {
    if (!value) {
      return value;
    }
    let timeSpan = value as TimeSpan;

    let timeSpanString = '';
    if (needHour) {
      timeSpanString =
        timeSpan.hours < 10 ? '0' + timeSpan.hours.toString() : timeSpan.hours.toString();
    }
    if (needMinute) {
      timeSpanString +=
        timeSpan.minutes < 10 ? ':0' + timeSpan.minutes.toString() : timeSpan.minutes.toString();
    }
    if (needSecond) {
      timeSpanString +=
        timeSpan.seconds < 10 ? ':0' + timeSpan.seconds.toString() : timeSpan.seconds.toString();
    }
    return timeSpanString;
  }
}

以上使用时即可在html中加入管道实现timespan显示

<td>
   {{ Duration | showTimeSpan }}
</td>

效果

00:00:00