128

このエラーを修正できないようです。検索バーと 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/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"
4

10 に答える 10

171

「クロスモジュール」の問題に直面していないことを確認してください

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

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

パイプを使用しているコンポーネントが

パイプモジュール

 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()
    ....
  ],
于 2016-11-23T17:12:39.243 に答える
13

上記の「クロスモジュール」の回答は私の状況に非常に役立ちましたが、考慮すべき別のしわがあるため、それを拡張したいと思います。サブモジュールがある場合、私のテストでは親モジュールのパイプも見えません。そのため、パイプを独自の別のモジュールに配置する必要がある場合もあります。

サブモジュールで表示されないパイプに対処するために行った手順の概要を次に示します。

  1. (親) SharedModule からパイプを取り出し、PipeModule に入れる
  2. SharedModule で、PipeModule をインポートしてエクスポートします ( SharedModule に依存するアプリの他の部分が PipeModuleに自動的にアクセスできるようにするため)。
  3. Sub-SharedModule の場合は、PipeModule をインポートします。これにより、SharedModule を再インポートする必要なく、PipeModule にアクセスできるようになります。これにより、他の問題の中でも循環依存の問題が発生します。

上記の「クロスモジュール」の回答に対する別の脚注: PipeModule を作成したときに、 forRoot 静的メソッドを削除し、共有モジュールにそれなしで PipeModule をインポートしました。私の基本的な理解は、forRoot は必ずしもフィルターに適用されないシングルトンのようなシナリオに役立つということです。

于 2017-01-06T16:40:47.050 に答える
0

注：角度モジュールを使用していない場合のみ

何らかの理由でこれはドキュメントにはありませんが、カスタムパイプをコンポーネントにインポートする必要がありました

import {UsersPipe} from './users-filter.pipe'

@Component({
    ...
    pipes:      [UsersPipe]
})
于 2016-08-17T23:11:02.823 に答える