2017-05-13 4 views
-1

私はangular2またはプログラミングの新機能です。
github apiを使用してユーザー名でデータを取得しようとしています。AppComponent.html:1エラーエラー:GithubServiceのプロバイダがありません

は私のファイルです。

import { Component } from '@angular/core'; 

import { ProfileComponent } from './components/profile.component'; 

@Component({ 
    selector: 'my-app', 
    template: `<profile></profile>`, 
}) 
export class AppComponent { } 

profile.component.ts

import {Component} from '@angular/core'; 

import {GithubService} from '../services/github.service'; 

@Component ({ 
    selector: 'profile', 
    template: 'this is profilie page' 
}) 

export class ProfileComponent{ 
    user: any; 


    constructor(private _githubServie: GithubService){ 
     this._githubServie.getUser().subscribe(user => { 
      console.log(user); 
      this.user = user; 
     }) 
    } 
} 

github.service.ts

import {Injectable} from '@angular/core'; 
import {Http, Headers} from '@angular/http'; 

import 'rxjs/add/operator/map'; 

@Injectable() 

export class GithubService{ 

    private username: string; 
    private client_id = "xxxxxxxxxxxxx"; 
    private client_secret = "xxxxxxxxxxxxxxxxxxxxxxxxx"; 

    constructor(private _http: Http){ 
     console.log("github service is ready"); 
     this.username = "graphicsmanoj"; 
    } 

    getUser(){ 
     return this._http.get('http://api.github.com/users/'+this.username+'?client_id='+this.client_id+'&client_secret='+this.client_secret).map(res => res.json()); 
    } 
} 

app.component.tsは解決のために事前にありがとうございました。

+2

あなたAppModule 'プロバイダで' GithubService'を注入したファイルであります'オプション配列? –

+0

あなたはHttpModuleとFormsModuleを意味しますか?はい、これらのモジュールを追加し、ProfileComponetも追加しました。 – Manoj

+3

NgModuleには、 'providers:[GithubService]'が必要です。 –

答えて

0

AppModuleプロバイダにサービスを注入する必要があります。私は小さなミスを犯した

@NgModule({ 
    declarations: [ 
    // the components 
], 
    imports: [ 
    // the modules to import 
    ], 
    providers: [ 
    GithubService 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 
+0

ありがとうbchampion。これは正常に動作しています。 – Manoj

0

app.module.tsは次のようにする必要があります。
私はそれはGithubService

以下

でなければなりませんapp.component.ts
でprofile.component輸入はcurrected app.component.tsが

import { Component } from '@angular/core'; 

import { GithubService } from './services/github.service'; 

@Component({ 
    selector: 'my-app', 
    template: `<profile></profile>`, 
    providers: [GithubService] 
}) 
export class AppComponent { } 
関連する問題