Question

所以我收到了这个错误：

Template parse errors: The pipe 'orderByDateSubmitted' could not be found.

我的任何代码都是这样的：

首先，我创建了一个Pipe：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'orderByDateSubmitted'
})

export class OrderByDateSubmittedPipe implements PipeTransform {

  transform(array: Array<any>, args: string): Array<any> {
    //sort code
  }
}

然后我为此创建了一个模块：

import { NgModule } from '@angular/core';
import { CommonModule } from "@angular/common";
import { OrderByDateSubmittedPipe } from './order-by-date-submitted';

@NgModule({
  imports: [CommonModule],
  declarations: [OrderByDateSubmittedPipe],
  exports: [OrderByDateSubmittedPipe],
})

export class OrderByDateSubmittedPipeModule {}

在我的App Module中

import { OrderByDateSubmittedPipe } from './../pipes/order-by-date-submitted/order-by-date-submitted';
import { OrderByDateSubmittedPipeModule } from './../pipes/order-by-date-submitted/order-by-date-submitted.module';

@NgModule({
  declarations: [MyApp...],
  imports: [...
    OrderByDateSubmittedPipeModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [...],
  providers: [...]
})
export class AppModule {}

我在我的一个组件中使用它：

*ngFor="let r of reports | orderByDateSubmitted: '-date_submitted'"

但是我收到了这个错误。我是否真的正确导入了模块？或者我错过了什么？任何帮助将不胜感激。

Answer 1

我最近几个小时一直被困在这个上，无法理解为什么我的管道在一个项目中工作，但当我将代码移动到一个新项目时它没有用。

不断收到关于＆＃39; name_of_my_pipe＆＃39;没找到

我终于意识到我的app.module.ts正在宣布/导出我的主页＆＃39;两次一次作为MyApp＆＃39;以及作为＆＃39; ListPage＆＃39; （我是一个完整的新手，基本上是从一些示例代码中混淆了一些东西，看起来当我创建页面＆＃39; ListPage＆＃39;使用离子CLI（已经是应用程序中的主页）它自动添加了正常的页面代码和对app.module.ts的引用）

无论如何这里是我原来的app.module.ts

import { MyApp } from './app.component';
import { ListPage } from '../pages/list/list';
import { InfoPage } from '../pages/info/info';
import { MyService } from '../services/rest/service';

@NgModule({
  declarations: [
    MyApp,
    ListPage,
    InfoPage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    ListPage,
    InfoPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    MyService,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

一旦我删除了对ListPage的引用（记得已经是app.component.ts中声明的app主页

我的自定义管道现已被识别

import { MyApp } from './app.component';
import { InfoPage } from '../pages/info/info';
import { MyService } from '../services/rest/service';

@NgModule({
  declarations: [
    MyApp,
    InfoPage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    InfoPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    MyService,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Answer 2

在组件中使用pipe时，也必须将pipemodule导入到组件级模块中。不仅在App.module.ts中。

|-->App.module.ts (App main component module)
|-->pipes.module.ts (Pipe component module)
|-->Newpage 
      |-->Newpage.module.ts (NewPage component module) <--//Import the pipe module here

请参阅thisAnswer以供参考。

Answer 3

您无需为管道创建模块。只需在AppModule的“声明”中导入它即可。

Answer 4

我正在使用Ionic 4，并且使用ionicCLI命令生成了管道

ionic g pipe my-pipe

那在声明中添加了我的新管道的进口行，但在出口中却没有。

那我也抛出了一个错误。

如何在Angular 4 / Ionic中的Component中正确导入Pipe Module？

4 个答案: