2016-06-23 7 views
1

私はangular2をテストしており、快適なサービスからデータを取得しようとしています。Angular2 http json request

私のサービスは、このようなものです:

import {Injectable} from '@angular/core'; 
import {Http, Response} from '@angular/http'; 
import {annuaireModel} from '../../models/annuaireModel'; 
import {Observable} from 'rxjs/Observable'; 
import 'rxjs/Rx'; 

@Injectable() 
export class annuaireService { 

    constructor(private _http: Http) { }; 

    getAnnuaire(codeRne : string) { 

      var url = 'http://192.168.40.30/api/editionsstandardsAPI/lireannuaire?codeEtablissement=' + codeRne ; 
     return this._http.get(url).map(res => <annuaireModel>res.json()).catch(this.gestErreur); 
    } 

    gestErreur(error: Response) { 
     console.error(error); 
     return Observable.throw(error.json() || 'Erreur serveur'); 
    } 
    /*getHero(id: number) { 
     return Promise.resolve(HEROES).then(heroes => heroes.filter(hero => hero.id === id)[0]); 
    }*/ 
} 

マイコンポーネント:

import {Component} from '@angular/core'; 
import {HTTP_PROVIDERS} from '@angular/http'; 
import {annuaireService} from './annuaireService'; 
import {annuaireModel} from '../../models/annuaireModel'; 

@Component({ 
    templateUrl: 'app/editionsStandards/annuaire/annuaire.html', 
    selector: 'annuaire', 
    directives: [], 
    providers: [HTTP_PROVIDERS,annuaireService] 
}) 

export class annuaireComponent { 

     annuaire : annuaireModel; 
     variableTest : string; 

    constructor(private _annuaireService :annuaireService) { } 

    ngOnInit() { 

     } 

     chargerAnnuaire() { 
      this._annuaireService.getAnnuaire('7508987231').subscribe(
          data => 
          {this.annuaire = data} , 
          error => alert(error), 
          () => console.log('OK') 
         ); 


    } 
} 

私のhtml:私はウェブサイトを起動すると

<h1>Annuaire</h1> 
<button (click)="chargerAnnuaire()" type="button">test</button> 
<div > 
    {{annuaire.entete.raisonSociale}} 
</div> 

、私はこのエラーがあります:

cannot read the property entente of undefined.

私は安らかなサービスをテストしたのだが、グーのJSONを返すん....

ヘルプ!私は何が間違っているのか理解できません。おかげ

答えて

2

Elvisオペレータの場合annuaire?.

{{ annuaire?.entete.raisonSociale }} 

を試してみて、それがenteteメンバにアクセスしません(未定義、ヌル、など)falsyです。

+0

また、 'entete'に' Elvis'演算子が必要な場合もあります。 – enjoibp3

+0

あなたは絶対に正しいです!私はこれを書いた:{{annuaire?.entente?。risonSociale}}それはうまく動作します。私はすでにelvis演算子を試していますが、最初の要素では2番目の要素だけではありません。多くの多くのありがとうandrei –