angular 应用管道

1、创建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 '--'
  }
}

2、在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 { }

3、页面使用

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

4、不好之处，请指教

转载于:https://www.cnblogs.com/LWJ-booke/p/9512126.html