Angular 自定义管道声明

Question

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

// 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;
  }
}

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

// 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>

我尝试将 Pipe 导入到 Component

// 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) {
  }    
}

但是我得到这个错误：

Error: Template parse errors: The pipe 'myFilter' could not be found

我也尝试在 mymodule-list.module.ts 中将其声明为提供者，或者在我的 app.modules.ts 声明和提供者中全局声明它，但仍然不起作用。

我查看了 Angular documentation 关于 Pipe 以及其他 Whosebug 答案，但找不到使其工作的方法.

所以我的问题是如何 declare/register 在 Angular (v4.1.0) / Ionic (v3.3.0) 中使用自定义 Pipe特定组件？

Answer 1

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

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

Answer 2

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

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

Angular 自定义管道声明

Angular custom Pipe declaration

typescript

ionic-framework

angular-pipe

angular