Response.json() se lie à un objet unique en utilisant l'interface - RxJs/Observable échoue

Question

Ce scénario fonctionne bien lorsque l'API RESTful renvoie un tableau JSON, mais la méthode web que j'appelle renvoie un seul objet JSON. Le code a donc été converti pour mapper un seul objet à partir de <IRegistration[]> to <IRegistration> tout le long de la pile.

Cette opération échoue et la console Chrome renvoie une erreur indiquant que l'application n'a pu trouver aucun des champs mappés dans le code HTML.

Le HTML

{{myobject.productId}}
{{myobject.productName}}

Le JSON

{
  "productId": 1,
  "productName": "My Field Value"
}

L'interface

export interface IRegistration {
    productId: number;
    productName: string;
}

L'observable

getRegistration(): Observable<IRegistration> {
    return this._http.get(this._svcURL)
        .map((response: Response) => <IRegistration>response.json())
        .do(data => console.log('ALL: ' + JSON.stringify(data)))
        .catch(this.handleError);
}

Le composant client

myobject: IRegistration;

ngOnInit(): void {
    this._registrationService.getRegistration().subscribe(
        reg => this.myobject= reg,
        error => this.errorMessage = <any>error
    );
}

L'erreur

 EXCEPTION: TypeError: Cannot read property 'productId' of undefined in [
{{myobject.productId}}
{{myobject.productName}}

 in SearchComponent@0:0]

Le débogage que j'ai effectué indique que la fonction response.json() de l'observable ne correspond pas correctement à l'IRegistration - je n'arrive pas à trouver la syntaxe correcte ?

Answer 1

Le code a l'air correct, je pense que le problème est que vous n'initialisez pas le fichier myobject: IRegistration; avant de l'utiliser.

El doc pour le crochet du cycle de vie ngOnInit() dit :

Initialiser la directive/le composant après qu'Angular ait d'abord affiché les propriétés liées aux données et défini les propriétés d'entrée de la directive/du composant.

Les données sont affichées avant que l'appel HTTP ne renvoie un résultat, donc myobject est indéfini quand Angular essaie de le rendre.

Vous pouvez utiliser ? pour ignorer les propriétés non définies telles que {{ myobject?.productId }} ou initialiser d'abord la propriété myobject: IRegistration = <IRegistration>{}; .