Angular2 http json 请求

Question

我正在测试 angular2 并尝试从 restful 服务检索数据。

我的服务是这样的：

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.

我已经测试了我的 restful 服务，它 return goo json ....

求助！我不知道我做错了什么。谢谢

Answer 1

尝试 Elvis 运算符 ?.

{{ annuaire?.entete.raisonSociale }}

如果 annuaire 是 falsy（未定义、空等），它将不会访问 entete 成员。

Angular2 http json 请求

Angular2 http json request

wcf-rest

angular