アングラー応用配管

3537 ワード

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