Ich kann diesen Fehler scheinbar nicht beheben. Ich habe eine Suchleiste und ein ngFor. Ich versuche, das Array mit einer benutzerdefinierten Pipe wie folgt zu filtern:
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);
}
}
Verwendung:
<input [(ngModel)]="searchTerm" type="text" placeholder="Search users">
<div *ngFor="let user of (users | usersPipe:searchTerm)">
...
</div>
Error:
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)">
Winkelversionen:
"@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"
angular
angular2-forms
angular2-pipe
Sumama Waheed
quelle
quelle
Antworten:
Stellen Sie sicher, dass Sie nicht mit einem "Cross-Modul" -Problem konfrontiert sind
Wenn die Komponente, die die Pipe verwendet, nicht zu dem Modul gehört, das die Pipe-Komponente als "global" deklariert hat, wird die Pipe nicht gefunden und Sie erhalten diese Fehlermeldung.
In meinem Fall habe ich die Pipe in einem separaten Modul deklariert und dieses Pipe-Modul in ein anderes Modul importiert, dessen Komponenten die Pipe verwenden.
Ich habe a deklariert, dass die Komponente, in der Sie die Pipe verwenden, ist
das Rohrmodul
Verwendung in einem anderen Modul (zB app.module)
quelle
Sie müssen Ihre Pipe in die Moduldeklaration aufnehmen:
quelle
You must include your pipe in the declarations array of the AppModule.
: angle.io/guide/pipes . Wie auch immer, Ihre Antwort behebt auch mein Problem.exports: [UsersPipe]
ob das Modul von anderen Modulen importiert werden soll.Für Ionic können mehrere Probleme auftreten, wie bei @Karl erwähnt. Die Lösung, die für ionisch träge geladene Seiten einwandfrei funktioniert, ist:
// pipes.ts Inhalt (es kann mehrere Pipes enthalten, denken Sie daran
// pipes.module.ts Inhalt
Fügen Sie PipesModule in den Importabschnitt app.module und @NgModule ein
import { PipesModule } from "../pipes/pipes.module"; @NgModule({ imports: [ PipesModule ] });
Fügen Sie PipesModule in jede Ihrer .module.ts ein, in der Sie benutzerdefinierte Pipes verwenden möchten. Vergessen Sie nicht, es in den Importbereich aufzunehmen. // Beispiel. Datei: pages / my-custom-page / my-custom-page.module.ts
import { PipesModule } from "../../pipes/pipes.module"; @NgModule({ imports: [ PipesModule ] })
Das ist es. Jetzt können Sie Ihre benutzerdefinierte Pipe in Ihrer Vorlage verwenden. Ex.
<div *ngFor="let prop of myObject | toArray">{{ prop.key }}</div>
quelle
Ich fand die obige Antwort "Cross Module" sehr hilfreich für meine Situation, möchte sie aber erweitern, da noch eine weitere Falte zu berücksichtigen ist. Wenn Sie ein Submodul haben, kann es in meinen Tests auch die Pipes im übergeordneten Modul nicht sehen. Aus diesem Grund müssen Sie möglicherweise auch Rohre in ein separates Modul einbauen.
Hier ist eine Zusammenfassung der Schritte, die ich unternommen habe, um Pipes zu beheben, die im Submodul nicht sichtbar sind:
Eine weitere Fußnote zur obigen "modulübergreifenden" Antwort: Als ich das PipeModule erstellte, entfernte ich die statische forRoot-Methode und importierte PipeModule ohne diese in mein freigegebenes Modul. Mein grundlegendes Verständnis ist, dass forRoot für Szenarien wie Singletons nützlich ist, die nicht unbedingt für Filter gelten.
quelle
Hier eine alternative Antwort vorschlagen:
Das Erstellen eines separaten Moduls für das Rohr ist nicht erforderlich , aber definitiv eine Alternative. Überprüfen Sie die Fußnote der offiziellen Dokumente: https://angular.io/guide/pipes#custom-pipes
Alles, was Sie tun müssen, ist, Ihre Pipe zum Deklarationsarray und das Provider- Array an der Stelle hinzuzufügen, an der
module
Sie die Pipe verwenden möchten.quelle
Hinweis : Nur wenn Sie keine Winkelmodule verwenden
Aus irgendeinem Grund ist dies nicht in den Dokumenten enthalten, aber ich musste die benutzerdefinierte Pipe in die Komponente importieren
quelle
quelle
Ich habe ein Modul für Pipes in demselben Verzeichnis erstellt, in dem meine Pipes vorhanden sind
Importieren Sie nun dieses Modul in app.module:
Jetzt kann es verwendet werden, indem dasselbe in das verschachtelte Modul importiert wird
quelle