Question

我正在尝试使用自定义 Pipe 来过滤项目列表。

@Override
public String toString() {
    return " time: " + this.time + " date: " + this.date + " fooo: " + this.fooo + " bar: " + this.bar + " bazzz: " 
            + "" + "" + this.bazzz;
}

我想在显示该列表的 Component 页面中使用它。

// pipes/my-filter/my-filter.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'my-filter',
})
export class MyFilter implements PipeTransform {
  transform(value: string, ...args) {
    return value;
  }
}

我尝试将 Pipe 导入组件

// pages/mymodule-liste/mymodule-liste.html

<ion-content>
    <ion-searchbar
      placeholder="Find"
      [(ngModel)]="myInput">
    </ion-searchbar>
    <button ion-item *ngFor="let item of listItem | myFilter: myInput"">
</ion-content>

但是我收到了这个错误：

错误：模板解析错误：管道＆＃39; myFilter＆＃39;无法找到

我还尝试将其声明为// pages/mymodule-liste/mymodule-liste.ts import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; import { MyFilter } from '../../pipes/my-filter/my-filter'; @IonicPage() @Component({ selector: 'page-mymodule-liste', templateUrl: 'mymodule-liste.html', }) export class MymoduleListePage { listItem: any constructor( public navCtrl: NavController, public navParams: NavParams, public myFilter: MyFilter) { } }中的提供者，或者我的mymodule-list.module.ts声明和提供者中的全局声明，但仍然无效。

我看看Angular documentation关于 Pipe 以及其他stackoverflow的答案，但无法找到让它工作的方法。

所以我的问题是如何在Angular（v4.1.0）/ Ionic（v3.3.0）中声明/注册自定义 Pipe 以用于特定组件？

Answer 1

你的管道名称是my-filter而不是myFilter

addAction()

Answer 2

管道名称为my-filter而不是myFilter。

同时检查管道是否在nglet中的ngModule中注册

角度定制管道声明

2 个答案: