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

0

パイプの名前は ではあり my-filterませんmyFilter。

また、パイプが宣言の ngModule に登録されているかどうかを確認します

于 2017-06-01T15:56:58.303 に答える