Angular 2 / TypeScript : Comment accéder à la propriété observable dans un composant

Question

J'ai une observable qui est remplie comme ceci :

this._mySubscription = this._myService.getSomething(id)
                                .subscribe(
                                    response => this._myData = response, 
                                    error => this.displayError(<any>error),
                                    () => this.stopLoading()
                                );

Je peux accéder à ses propriétés dans mon balisage HTML en utilisant l'opérateur Elvis comme ceci :

{{_myData?.PropertyNameHere}}

Mais comment puis-je accéder à la même propriété dans le composant en utilisant TypeScript ?

Cela produit une ligne rouge ondulée sous la propriété :

this._myData.PropertyNameHere

Et dit :

La propriété n'existe pas sur Observable

Mise à jour : Exemple d'appel de service

getSomething(id: string): Observable<any> {

let params = 'id=' + id;

return this._http
            .post(apiUrl + 'SomeController/SomeAction', params, {withCredentials: true, headers: this.headers})
            .timeoutWith(maxTimeHttpCalls, Observable.defer(() => Observable.throw(this._feedbackService.timeout())))
            .map((response: Response) => response.json().data.Items);

}

Answer 1

_myData dans la classe ne doivent pas être de type Observable . Il doit s'agir du type de l'objet que vous retournez à partir de la commande map opérateur à votre service.

.map((response: Response) => response.json().data.Items)

Quel que soit le type data.Items est, cela devrait être le type de _myData . Si vous ne savez pas quel est le type, alors faites-le. any . Ensuite, vous pouvez faire ce que vous voulez avec sans avoir d'avertissement du compilateur. Mais si vous connaissez la structure des données, il est préférable de créer une classe modèle pour celles-ci afin d'obtenir un typage fort.

interface SomeModel {
  somProperty: string;
}

getSomething(id: string): Observable<SomeModel> {

  return this._http
             ...
             .map((response: Response) => <SomeModel>)response.json().data.Items);
}

Votre composant

class MyComponent {
  private _myData: SomeModel;

  this._mySubscription = this._myService.getSomething(id)
    .subscribe((response: SomeModel) => this._myData = response, 
               error => this.displayError(<any>error),
               () => this.stopLoading());
}