1. ホーム
  2. angular

[解決済み] パイプ ' ' が見つかりません。

2022-07-15 15:46:18

質問

このエラーを修正することができないようです。私は検索バーとngForを持っています。私はこのようなカスタムパイプを使用して配列をフィルタリングしようとしています。

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

import { User } from '../user/user';

@Pipe({
  name: 'usersPipe',
  pure: false
})
export class UsersPipe implements PipeTransform {
  transform(users: User [], searchTerm: string) {
    return users.filter(user => user.name.indexOf(searchTerm) !== -1);
  }
}

使用方法

<input [(ngModel)]="searchTerm" type="text" placeholder="Search users">

<div *ngFor="let user of (users | usersPipe:searchTerm)">
...
</div>

エラーです。

zone.js:478 Unhandled Promise rejection: Template parse errors:
The pipe 'usersPipe' could not be found ("
<div class="row">
    <div  
    [ERROR ->]*ngFor="let user of (user | usersPipe:searchTerm)">

Angularのバージョンです。

"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",
"@angular/forms": "0.3.0",
"@angular/http": "2.0.0-rc.5",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.26",
"bootstrap": "^3.3.6",
"zone.js": "^0.6.12"

どのように解決するのですか?

以下のような状況でないことを確認してください。 クロスモジュール問題に直面していないか確認してください。

パイプを使用しているコンポーネントが、パイプコンポーネントを "グローバルに" 宣言したモジュールに属していない場合、パイプは見つからず、このエラーメッセージが表示されます。

私の場合、別のモジュールでパイプを宣言し、パイプを使用するコンポーネントを持つ他のモジュールでこのパイプモジュールをインポートしました。

を宣言しています。 というのは、パイプを使っているコンポーネントが

パイプモジュール

 import { NgModule }      from '@angular/core';
 import { myDateFormat }          from '../directives/myDateFormat';

 @NgModule({
     imports:        [],
     declarations:   [myDateFormat],
     exports:        [myDateFormat],
 })

 export class PipeModule {

   static forRoot() {
      return {
          ngModule: PipeModule,
          providers: [],
      };
   }
 } 

他のモジュールでの利用 (例: app.module)

  // Import APPLICATION MODULES
  ...
  import { PipeModule }    from './tools/PipeModule';

  @NgModule({
     imports: [
    ...
    , PipeModule.forRoot()
    ....
  ],