Ionic 2 Pipes - 未捕获的错误：在 MapToIterable(...) 上找不到指令注释答案

【问题标题】：Ionic 2 Pipes - Uncaught Error: No Directive annotation found on MapToIterable(…)Ionic 2 Pipes - 未捕获的错误：在 MapToIterable(...) 上找不到指令注释
【发布时间】：2017-03-28 16:37:07
【问题描述】：

我在尝试在 Ionic 2 中使用管道时遇到了问题。这是我的错误：

Uncaught Error: No Directive annotation found on MapToIterable(…)

我使用 Ionic 2 CLI 生成了一个管道，并对其进行了编辑以完成一些功能，我可以通过 *ngFor 迭代对象的对象。这是我的管道代码：

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

@Pipe({
  name: 'mapToIterable'
})
@Injectable()
export class MapToIterable  {
  transform(value: any): any {
    if(value === null) {
      return null;
    } else {
      return Object.keys(value).map(key => value[key]);
    }
  }
}

这是我的模板中的 *ngFor 循环：

<div *ngFor="let video of (user.videos | mapToIterable)">
        <img src="{{video.thumbnail}}" />
      </div>

我不确定为什么会遇到这个问题。我已经在@NgModule 声明中正确导入了管道，但无论我尝试过什么其他方法，我仍然遇到此错误。

有人知道吗？

谢谢！

【问题讨论】：

你为什么同时拥有@Pipe和@Injectable？
这就是我运行 ionic g pipe map-to-iterable 时 Ionic 2 CLI 生成的内容
哦，对了！自从我使用 Ionic 2 以来已经有一段时间了，在普通的 Angular 2 中，您只使用@Pipe，而@Injectable 用于例如服务。
没问题 :) 但是，当我删除 @Injectable 装饰器时，它仍然给我同样的错误：/ 我不知道这个东西的问题是嘿
能否请您在该ngFor所在的页面中添加您如何导入它？

标签： angular ionic2

【解决方案1】：

你可以尝试只在 app.module.ts 的声明数组中导入你的管道，而不是在离子页面的 entryComponents 中。这对我有用。

@NgModule({
declarations: [
    AppComponent,
    ...,
    YourPipe
],
imports: [
    IonicModule.forRoot(AppModule)
],
bootstrap: [IonicApp],
entryComponents: [
    AppComponent,
    ...
],

【讨论】：