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

Question

我正在尝试在 angular 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 装饰器添加到您的 class:

@Pipe({
  name: 'endWithT'
})
export class EndWithT implements PipeTransform {
  transform(value: string, exponent: string): string {
    return value
  }
}

并在要使用它的组件/页面的 pipes 属性中添加 class 名称：

@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。

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

how to use pipe in angular 2 js?

javascript

angularjs

ionic2

angular2-routing

angular