angular 應用管道

一、建立filter文件

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

// 管道--性別
@Pipe({name: 'sexType'})
export class sexType implements PipeTransform {
  transform(value) {
    if(value === 'boy') {
      return '男'
    } else if (value === 'girl') {
      return '女'
    } else {
      return '--'
    }
  }
}

// 時間格式
@Pipe({name: 'formatDate'})
export class formatDate implements PipeTransform {
  transform(value, formatString = 'YYYY年MM月DD日') {
    if (moment(value).isValid()) {
      return moment(value).format(formatString)
    }
    return '--'
  }
}

二、在app.module.ts導入

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule }   from '@angular/forms';
import { sexType, formatDate } from './filter/filter';

@NgModule({
  declarations: [
    sexType,
    formatDate
  ],
  imports: [
    NgbModule.forRoot(),
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: []
})
export class AppModule { }

三、頁面使用

<div class="row">
  <div class="col-md-10 Title"><span>事業發展</span></div>
  <div class="col-md-12">
    <p *ngFor="let v of userList">
      <span>{{v.name}}--{{v.age}}--{{v.sex | sexType}}</span>
      <button ng-click='sayHello()'>修改</button>
    </p>
  </div>
</div>

四、很差之處，請指教