2017-02-24 14 views
0

私はAngular 2を使って簡単なアプリケーションを作成しようとしていますが、パイプデコレータを使用する際に問題があります。私はパイプを使用してキーの値にアクセスしています。これは角度1で非常に簡単にできました。これをPIPEを使用して実装するために、私はapp.module.tsを除いてtemplateSO questionに投稿しました。app.module.tsがパイプの名前を見つけることができません

ERROR in /Users/me/thisapp/mybio/src/app/app.module.ts (20,5): Cannot find name 'KeysPipe'.) 

私は私のapp.module.ts宣言内のパイプの名前をコピーしようとしたが、これは問題を解決していませんでした。全体的に、コンポーネント、モジュール、pipe.tsファイルがどのように相互作用するかについてはかなり失われています。何か助けていただければ幸いです。

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { Pipe, PipeTransform } from '@angular/core'; 
import { routes } from './app.router'; 
import { AppComponent } from './app.component'; 
import { AppResumeComponent } from './app-resume/app-resume.component'; 
import { EducationComponent } from './education/education.component'; 
import { WorkxpComponent } from './workxp/workxp.component'; 
import { LaughComponent } from './laugh/laugh.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    AppResumeComponent, 
    EducationComponent, 
    WorkxpComponent, 
    LaughComponent, 
    KeysPipe 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    routes 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

pipe.tsあなたはmodule.tsにインポートを追加する必要が

@Pipe({name:'keys'}) 
export class KeysPipe implements PipeTransform { 
    transform(value,args:string[]) : any { 
    let keys = []; 
    for (let key in value){ 
     keys.push({key: key, value: value[key]}); 
    } 
    return keys 
} 
} 

laugh.component.ts

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


import {KeysPipe} from './pipe' 

@Component({ 
    selector: 'my-app', 
    templateUrl: 'laugh.component.html', 
}) 
export class LaughComponent { 

    demo = { 
    'key1': 'ANGULAR 2', 
    'key2': 'Pardeep', 
    'key3': 'Jain', 
    } 
} 

答えて

2

import {KeysPipe} from './pipe' 
+0

ありがとうございます! @ angle/core ';から 'import {Component、Pipe、PipeTransform}'を' pipe.ts'に 'パイプが定義されていません 'に追加した後に別のエラーが表示されました。これを引き起こす原因を知っていますか? – st4rgut

+1

'@ angular/core'から{pipe}をインポートします。それは動作するはずです、あなたのパイプを他の名前に変更してみてください – Sajeetharan

関連する問題