如何在角度2 js中使用管道?

时间:2016-05-23 14:58:56

标签: javascript angularjs angular ionic2 angular2-routing

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

1 个答案:

答案 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