Angular2的管道Pipe的使用方法

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

/*users: Array<any> = [
 { name: '1', id: 1 },
 { name: '2', id: 2 },
 { name: '3', id: 3 },
 { name: '4', id: 4 },
 { name: '5', id: 5 },
 { name: '6', id: 6 }
];*/

@Pipe({ name: 'filterUser' })
export class FilterUserPipe implements PipeTransform {
 transform(allUsers: Array<any>, ...args: any[]): any {
 return allUsers.filter(user => user.id > 3);
 }
}

<div>
 <ul>
 <li *ngFor="let user of (users | filterUser)">
 {{user.name}}
 </li>
 </ul>
</div>
<button (click)="addUser()"> add new user</button>

import { Component } from "@angular/core";

@Component({
 templateUrl: './user.template.html',
})

export class EnvAppComponent {
 id = 7;
 users: Array<any> = [
 { name: '1', id: 1 },
 { name: '2', id: 2 },
 { name: '3', id: 3 },
 { name: '4', id: 4 },
 { name: '5', id: 5 },
 { name: '6', id: 6 }
 ];

 addUser() {
 this.users.push({ name: this.id++, id: this.id++ })
 }
}

@Pipe({ name: 'filterUser', pure: false })
export class FilterUserPipe implements PipeTransform {
 transform(allUsers: Array<any>, ...args: any[]): any {
 return allUsers.filter(user => user.id > 3);
 }
}

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { myComponent } from 'myComponent.ts';
import { HelloPipe } from "hello.pipe.ts";

@NgModule({
 declarations: [
 myComponent,
 HelloPipe
 ],

 imports: [
 IonicPageModule.forChild(myComponent)
 ],

 exports: [
 myComponent
 ]
})

export class MyComponent {}