0

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

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

我尝试将管道导入组件

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

但我得到这个错误：

错误：模板解析错误：找不到管道“myFilter”

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

我查看了有关Pipe的 Angular文档以及其他 stackoverflow 答案，但找不到使其工作的方法。

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

4

2 回答 2

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>
于 2017-06-01T15:52:02.563 回答
0

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

还要检查管道是否在声明中的 ngModule 中注册

于 2017-06-01T15:56:58.303 回答