我试图在角度2 js中使用管道或过滤器。我需要在我的列表中应用该过滤器。我想只显示该项目(以t
字符结尾)。换句话说我需要仅显示以t
这是我的代码 http://plnkr.co/edit/FKGrBDGyEIc3n2oaWUvf?p=preview
import { Pipe, PipeTransform } from 'angular2/core';
export class EndWithT implements PipeTransform {
transform(value: string, exponent: string): string {
return value
}
}
在html中
<ion-list style="border:2px solid grey;height:500px">
<ion-item *ngFor="#item of Todo | EndWithT">
{{item.name}}
<button style='float:right' (click)="deleteTodo(item)">delete</button>
</ion-item>
</ion-list>
答案 0 :(得分:2)
您需要将@Pipe
装饰器添加到您的班级:
@Pipe({
name: 'endWithT'
})
export class EndWithT implements PipeTransform {
transform(value: string, exponent: string): string {
return value
}
}
并在要使用它的组件/页面的pipes
属性中添加类名:
@Page({
template: `
<ion-list style="border:2px solid grey;height:500px">
<ion-item *ngFor="#item of Todo | endWithT">
{{item.name}}
<button style='float:right' (click)="deleteTodo(item)">delete</button>
</ion-item>
</ion-list>
`,
pipes: [ EndWithT ]
})
您还需要以这种方式更新transform
方法:
transform(value: string, exponent: string): string {
if (!value) {
return value;
}
return value.filter((val) => {
return /t$/.test(val.name);
});
}
请参阅此plunkr:http://plnkr.co/edit/3TQDQWq84YePtjDsrIgb?p=preview。