アングラー応用配管
3537 ワード
1、filterファイルを作成する
転載先:https://www.cnblogs.com/LWJ-booke/p/9512126.html
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