Le tuyau '' n'a pas pu être trouvé tuyau personnalisé angular2

Question

Je n'arrive pas à corriger cette erreur. J'ai une barre de recherche et un ngFor. J'essaie de filtrer le tableau en utilisant un tuyau personnalisé comme ceci:

 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);
  }
}
 

Usage:

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

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

Erreur:

 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)">
 

Versions angulaires:

 "@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"
 

Answer 1

Assurez-vous que vous n'êtes pas face à un "cross module" problème

Si le composant qui est à l'aide de la pipe, n'appartient pas à ce module qui a déclaré le tuyau de la composante "mondiale", puis la conduite n'est pas trouvé et que vous obtenez ce message d'erreur.

Dans mon cas, j'ai déclaré la pipe dans un module séparé et importé cette pipe module dans n'importe quel autre module ayant composants à l'aide de la pipe.

J'ai déclaré un que le composant dans lequel vous utilisez le tuyau est

le Module de Tuyau

 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: [],
      };
   }
 } 

Utilisation dans un autre module (par exemple app.le module)

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

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

Answer 2

Vous devez inclure votre pipe dans déclaration de module :

Answer 3

Pour Ionique, vous pouvez faire face à de multiples problèmes comme @Karl mentionné. La solution qui fonctionne parfaitement pour ionique paresseux chargement des pages est:

1. Créer des pipes répertoire avec les fichiers suivants: les tuyaux.ts et des tuyaux.le module.ts

// les tuyaux.ts contenu (il peut en avoir plusieurs tuyaux à l'intérieur, n'oubliez pas de

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;
  }
}

// les tuyaux.le module.ts contenu

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

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

2. Inclure PipesModule dans l'app.module et @NgModule importations section

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

3. Inclure PipesModule dans chacune de vos .le module.ts où vous souhaitez utiliser des tuyaux. N'oubliez pas de l'ajouter dans les importations de l'article. // Exemple. fichier: pages/mon-custom-page/mon-custom-page.le module.ts

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

4. Thats it. Vous pouvez maintenant utiliser votre tuyauterie sur mesure dans votre modèle. Ex.

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

Answer 4

J'ai trouvé la "croix du module" réponse ci-dessus, très utile à ma situation, mais voudrait étendre sur ce point, car il est un autre de la ride à prendre en compte. Si vous avez un sous-module, il est également impossible de voir les tuyaux dans le module parent lors de mes tests. Pour cette raison, vous devrez peut-être mettre des tuyaux dans leur propre module séparé.

Voici un résumé des étapes, j'ai pris l'adresse de tuyaux n'est pas visible dans le sous-module:

1. Prendre des tuyaux de (parent) SharedModule et de mettre en PipeModule
2. Dans SharedModule, l'importation PipeModule et de l'exportation (pour les autres parties de l'application dépend de SharedModule pour avoir accès automatiquement PipeModule)
3. Pour les Sous-SharedModule, l'importation PipeModule, de sorte qu'il peut accéder à PipeModule, sans avoir à les ré-importer SharedModule qui permettrait de créer une dépendance circulaire question, parmi d'autres problèmes.

Une autre note de bas de page au-dessus "de la croix-module" réponse: quand j'ai créé le PipeModule j'ai enlevé le forRoot méthode statique et importés PipeModule sans que, dans mon module partagé. Ma compréhension de base est que forRoot est utile pour les scénarios comme des singletons, qui ne s'appliquent pas aux filtres nécessairement.

Answer 5

Remarque : Seulement si vous n’utilisez pas de modules angulaires

Pour une raison quelconque, dans que ce n’est pas les docs mais j’ai dû importer le tuyau personnalisé dans le composant