2016-06-15 10 views
2

ではありません元の例外:例外TypeError:私はこれが私のサービスファイルである私の先行入力コンポーネントでそれを使用するためにサービス・ファイルにWebサービスを呼び出す必要がありますが、それは私のコンソールに私にこの問題メッセージを返し</p> <p>機能

export class DslamService { 
private host = window.location.host; 

constructor(private http: Http) {} 

getDslams() : Observable<Site[]> { 
    return this.http.get('http://' + this.host + '/dslam_service.php') 
      .map(this.extractData) 
      .catch(this.handleError); 
} 


private extractData(res: Response) { 
    let body = res.json(); 
    return body.data || { }; 
    } 

    private handleError (error: any) { 
    // In a real world app, we might use a remote logging infrastructure 
    // We'd also dig deeper into the error to get a better message 
    let errMsg = (error.message) ? error.message : 
     error.status ? `${error.status} - ${error.statusText}` : 'Server  error'; 
    console.error(errMsg); // log to console instead 
    return Observable.throw(errMsg); 
    } 
} 

そして、私の先行入力コンポーネント:

providers: [HTTP_PROVIDERS, DslamService], 
    directives: [TYPEAHEAD_DIRECTIVES, CORE_DIRECTIVES, FORM_DIRECTIVES], 
    export class TypeaheadComponent implements OnInit { 
     private dslam: Site[]; 
     constructor(private service: DslamService) {} 
     ngOnInit() { this.getDslams(); } 
     getDslams() { 
      this.service.getDslams() 
        .subscribe(
        dslam => this.dslam = dslam); 
     } 

そして、私のナビゲーターコンソールの

私はこのメッセージを持っていますあなたのサービスファイルで

をチェックする

enter image description here

+0

伝えるのは難しい。 Plunkerで再現できますか? –

+0

https://plnkr.co/edit/TR5PJOrXmojoRdgVzOsb?p=catalogue – Bouazza

+0

このPlunkerは問題を再現しません。 Plunkerの 'new'ボタンを使って適切な基本Angular2 TSプロジェクトを得ることができます。 –

答えて

0

いくつかの事はあなたのDIを行っていますか?

そう...

import {Injectable} from 'angular2/core'; 
import {Http, HTTP_PROVIDERS, Headers} from 'angular2/http'; 
import {Observable} from 'rxjs/Observable'; 

@Injectable() 
export class DslamService { 
private host = window.location.host; 

constructor(private http: Http) {} 

getDslams() : Observable<Site[]> { 
    return this.http.get('http://' + this.host + '/dslam_service.php') 
      .map(this.extractData) 
      .catch(this.handleError); 
} 

... 

はその後、サービスクラスDslamServiceをブートストラップして、プロジェクトにDslamServiceを追加していますか?

like ... import {DslamService} from './location/of/DslamService';

bootstrap(AppComponent, [ 
    DslamService 
]); 

ブートストラップは、アプリケーションのベースで発生します。通常main.ts/app.tsにあります

最後にコンストラクタ内のコンポーネントで、サービスをpublicに変更して再テストします。そうであるように...

constructor(public service: DslamService) {} 
5

Angular2は関数とメソッドを区別します。

したがって、関数にパラメータがない場合は、角度のためのメソッドであるため、getDslamsをwithout()を呼び出す必要があります。 Webサービス/ RESTでの作業のために

this.service.getDslams; // this is a method call 
this.service.getDslams(parameter); // this is a function call 

、心に留めておくの角度・オブジェクトにJSONレスポンスを解析するとき、その角度が実現される機能を作成しません。 すべての属性にアクセスできますが、service-callの値を使用してオブジェクトをインスタンス化するまでは、関数/メソッドは使用できません。

希望すると=)

関連する問題

 関連する問題