web-dev-qa-db-ja.com

パイプ「」は角度2のカスタムパイプが見つかりませんでした

このエラーを修正することはできません。検索バーと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"
angularangular2-formsangular2-pipe
89
Sumama Waheed

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

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

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

私はあなたがパイプを使用しているコンポーネントがであることを宣言しました

パイプモジュール

 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()
    ....
  ],
119
Karl

モジュール宣言にパイプを含める必要があります。

declarations: [ UsersPipe ],
providers: [UsersPipe]
49
Yuvals

私は上の "クロスモジュール"の答えが私の状況に非常に役立つと思いました、しかし考慮すべきもう一つのしわがあるので、それについて拡張したいと思います。あなたがサブモジュールを持っているなら、それは私のテストで親モジュールのパイプも見ることができません。その理由のために、あなたはそれ自身の別々のモジュールにパイプを入れる必要があるかもしれません。

サブモジュールに表示されていないパイプに対処するために私が行ったステップの概要は次のとおりです。

  1. （親）SharedModuleからパイプを取り出し、PipeModuleに入れる
  2. SharedModuleで、PipeModuleをインポートしてエクスポートします（appのSharedModuleに依存する場合は、PipeModuleに自動的にアクセスします）。
  3. Sub-SharedModuleの場合は、PipeModuleをインポートすると、循環依存関係の問題が発生するようなSharedModuleを再インポートしなくても、PipeModuleにアクセスできます。

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

12
sarora

イオンについては、@カールが述べたように複数の問題に直面する可能性があります。イオンレイジーロードされたページに対して完璧に機能する解決策は、次のとおりです。

  1. 次のファイルを使用してパイプディレクトリを作成します。pipes.tsおよびpipes.module.ts

// pipes.tsの内容（内部に複数のパイプを含めることができます。

use @Pipe function before each class)
import { PipeTransform, Pipe } from "@angular/core";
@Pipe({ name: "toArray" })
export class toArrayPipe implements PipeTransform {
  transform(value, args: string[]): any {
    if (!value) return value;
    let keys = [];
    for (let key in value) {
      keys.Push({ key: key, value: value[key] });
    }
    return keys;
  }
}

// pipes.module.tsの内容

import { NgModule } from "@angular/core";
import { IonicModule } from "ionic-angular";
import { toArrayPipe } from "./pipes";

@NgModule({
  declarations: [toArrayPipe],
  imports: [IonicModule],
  exports: [toArrayPipe]
})
export class PipesModule {}

  1. App.moduleおよび@NgModuleインポートセクションにPipesModuleを含める

    import { PipesModule } from "../pipes/pipes.module"; @NgModule({ imports: [ PipesModule ] });

  2. カスタムパイプを使用する各.module.tsにPipesModuleを含めます。インポートセクションに追加するのを忘れないでください。 //例ファイル：pages/my-custom-page/my-custom-page.module.ts

    import { PipesModule } from "../../pipes/pipes.module"; @NgModule({ imports: [ PipesModule ] })

  3. それでおしまい。今すぐあなたのテンプレートであなたのカスタムパイプを使用することができます。例.

<div *ngFor="let prop of myObject | toArray">{{ prop.key }}</div>

9
Timothy

代替の答えをここに提案する：

Pipe用に別のモジュールを作成することは必須ではありませんが、これは間違いなく代替方法です。公式ドキュメントの脚注を確認してください。 https://angular.io/guide/pipes#custom-pipes

カスタムパイプは、組み込みパイプを使用するのと同じ方法で使用します。
AppModuleの宣言配列にパイプを含める必要があります。パイプをクラスに注入することを選択した場合は、NgModuleのプロバイダー配列にそれを提供する必要があります。

あなたがしなければならないのはあなたが使いたいmoduleの宣言配列とprovider配列にあなたのパイプを追加することだけです。パイプ.

declarations: [
...
CustomPipe,
...
],
providers: [
...
CustomPipe,
...
]
0
ykadaru

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

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

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

@Component({
    ...
    pipes:      [UsersPipe]
})
0
Sumama Waheed
import { Component, Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'timePipe'
})
export class TimeValuePipe implements PipeTransform {

  transform(value: any, args?: any): any {
   var hoursMinutes = value.split(/[.:]/);
  var hours = parseInt(hoursMinutes[0], 10);
  var minutes = hoursMinutes[1] ? parseInt(hoursMinutes[1], 10) : 0;
  console.log('hours ', hours);
  console.log('minutes ', minutes/60);
  return (hours + minutes / 60).toFixed(2);
  }
}
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  order = [
    {
      "order_status": "Still at Shop",
      "order_id": "0:02"
    },
    {
      "order_status": "On the way",
      "order_id": "02:29"
    },
    {
      "order_status": "Delivered",
      "order_id": "16:14"
    },
     {
      "order_status": "Delivered",
      "order_id": "07:30"
    }
  ]
}

Invoke this module in App.Module.ts file.
0
Chowdeswara Rao