it-swarm.com.de

Das Rohr '' konnte nicht als benutzerdefiniertes Rohr 'angle2' gefunden werden

Ich kann diesen Fehler nicht beheben. Ich habe eine Suchleiste und eine 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);
  }
}

Verwendungszweck:

<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"
79
Sumama Waheed

Stellen Sie sicher, dass Sie kein ein "Cross-Modul" Problem haben

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 das Rohr in einem separaten Modul deklariert und dieses Rohrmodul in ein anderes Modul importiert, das Komponenten enthält, die das Rohr verwenden.

Ich habe ein .__ erklärt, dass die Komponente, in der Sie die Pipe verwenden, ist 

das Rohrmodul

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

Verwendung in einem anderen Modul (z. B. app.module)

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

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

Sie müssen Ihre Pipe in die Moduldeklaration aufnehmen: 

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

Ich fand die Antwort "Cross-Modul" oben sehr hilfreich für meine Situation, möchte aber darauf hinweisen, da es noch eine weitere Faltenbildung gibt. Wenn Sie über ein Submodul verfügen, werden in meinem Test auch die Pipes im übergeordneten Modul nicht angezeigt. Aus diesem Grund müssen Sie möglicherweise auch Rohre in ein eigenes separates Modul einfügen. 

Hier ist eine Zusammenfassung der Schritte, die ich unternommen habe, um Pipes anzusprechen, die im Submodul nicht sichtbar sind:

  1. Nehmen Sie Pipes aus (übergeordnetem) SharedModule und fügen Sie sie in PipeModule ein
  2. Importieren Sie in SharedModule PipeModule und exportieren Sie (für andere Teile der App abhängig von SharedModule , um automatisch auf PipeModule zuzugreifen)
  3. Importieren Sie für Sub-SharedModule PipeModule, um auf PipeModule zugreifen zu können, ohne dass Sie SharedModule erneut importieren müssen, wodurch unter anderem ein zyklisches Abhängigkeitsproblem entsteht.

Eine weitere Fußnote zu der obigen Antwort "Cross-Modul": Als ich das PipeModule erstellte, entfernte ich die statische forRoot-Methode und importierte PipeModule ohne das in meinem gemeinsam genutzten Modul. Mein grundlegendes Verständnis ist, dass forRoot für Szenarien wie Singletons nützlich ist, die nicht unbedingt für Filter gelten.

12
sarora

Bei Ionic können Sie mit mehreren Problemen konfrontiert werden, wie @Karl erwähnt. Die Lösung, die fehlerfrei für ionische Lazy-Load-Seiten funktioniert, lautet:

  1. Erstellen Sie das Pipes-Verzeichnis mit folgenden Dateien: Pipes.ts und Pipes.module.ts

// Pipes.ts Inhalt (es kann mehrere Pipes enthalten, denken Sie daran 

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 Inhalt

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. Fügen Sie PipesModule in den Importbereich für app.module und @NgModule ein

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

  2. Fügen Sie PipesModule in jedes Ihrer .module.ts ein, wo Sie benutzerdefinierte Pipes verwenden möchten. Vergessen Sie nicht, es in den Importbereich aufzunehmen. // // Beispiel. Datei: pages/meine-benutzerdefinierte-Seite/meine-benutzerdefinierte-Seite.module.ts

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

  3. 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>

8
Timothy

Hier eine alternative Antwort vorschlagen:

Erstellen eines separaten Moduls für die Pipe ist nicht erforderlich, ist aber definitiv eine Alternative. Überprüfen Sie die offizielle Fußnote des Dokuments: https://angular.io/guide/pipes#custom-pipes

Sie verwenden Ihre benutzerdefinierte Pipe genauso wie die eingebauten Pipes.
Sie müssen Ihre Pipe in das Deklarationsarray von AppModule aufnehmen. Wenn Sie Ihre Pipe in eine Klasse einspeisen möchten, müssen Sie sie im Provider-Array Ihres NgModule angeben.

Alles, was Sie tun müssen, ist, Ihre Pipe zum Array Deklarationen und zum Array Provider in module hinzuzufügen, in dem Sie die Pipe verwenden möchten.

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

Hinweis: Nur wenn Sie keine Winkelmodule verwenden

Aus irgendeinem Grund ist dies nicht in den Dokumenten, aber ich musste das benutzerdefinierte Rohr in der Komponente importieren

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