未捕获(承诺):错误:模板解析错误:找不到管道'密钥'

时间:2017-07-27 16:31:58

标签: angular pipe

这是我的第一篇文章,所以如果我不遵守一些规则,我会道歉。 这篇文章的标题可能会响起,因为我查看了它周围的所有结果,但找不到问题的根本原因。

我有一个模式打开以显示一个表单,其中我有一个选项,它将列出枚举中的选项。我正在为此枚举应用管道以使对象成为数组。

但我发现管道'钥匙'没有找到问题。

我非常感谢你的帮助!

所以我的 app.module.ts

import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { WaitingTime, YearsAgo, SortBy, KeysPipe} from '../pipes/mypipe';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    WaitingTime,
    YearsAgo,
    SortBy,
    KeysPipe //declaring my pipe here
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    MyDateListService    
  ]
})
export class AppModule {}

然后我的主页 home.ts (将节省一些不必要的行)。 这是模态将打开的地方。

import { Component } from '@angular/core';
import { NavController, ModalController, AlertController, ItemSliding} from 
'ionic-angular';
import {DateFormPage} from '../date-form/date-form'
import {WaitingTime, YearsAgo} from '../../pipes/mypipe';
import {MyDates } from '../../models/my-dates';
import {MyDateListService} from '../../services/date-list'

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {}

打开 date-form.ts 的模态页面 我需要管道才能运行

import { Component, OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-
angular';
import {NgForm, FormBuilder, FormControl, FormGroup, Validators} from 
'@angular/forms'
import { MyDateListService } from '../../services/date-list';
import {KeysPipe} from '../../pipes/mypipe'; //here is the pipe
import {DateTypes} from '../../models/enums';

@IonicPage()
@Component({
  selector: 'page-date-form',
  templateUrl: 'date-form.html'
})

export class DateFormPage implements OnInit {}

最后我的烟斗 mypipe.ts

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

//declaring all my pipes
@Pipe ({
    name:'waitingTime'
})

export class WaitingTime implements PipeTransform
{   }
[.... all the other pipes]

// and this is the pipe that is not found.
@Pipe ({ 
    name: 'keys', 
    pure: false 
})

export class KeysPipe implements PipeTransform {

    transform(value: any, args: any[] = null): any {
        return Object.keys(value).map(key => value[key]);
    }
}

1 个答案:

答案 0 :(得分:1)

好吧,我终于找到了我的错误,可能是因为还是有点新手并没有注意到离子自动创建的页面。

当我已经有一个 date-form.module.t 来定义我的模块时,我试图在我的 date-form.ts 中获取@NgModule。 所以在那里声明我的管道,并从其他模块 app.module.ts 删除它的声明使它工作。

感谢您的所有评论,他们引导我了解我的问题的来源。