javascript - 如何在angular 2 js中使用管道？

Question

我正在尝试在 Angular 2 js 中使用管道或过滤器。我需要在我的列表中应用该过滤器。我只想显示该项目(以 t 字符结尾)。在其他words 我只需要显示以 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 方法:

transform(value: string, exponent: string): string {
  if (!value) {
    return value;
  }

  return value.filter((val) => {
    return /t$/.test(val.name);
  });
}

查看此插件:http://plnkr.co/edit/3TQDQWq84YePtjDsrIgb?p=preview .