如何在角2 js中使用管道？

Question

我想在角度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> 

Answer 1

您需要添加@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 methos這方式：

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。