Afficher les données de JSON en utilisant Angular 2 - Observable et async

Question

J'ai un simple service Angular 2 qui appelle un fichier JSON local. Je peux obtenir l'objet à console.log dans la fonction .map dans le general.service.ts. Cependant, en raison de la nature de l'appel asynchrone, je n'arrive pas à imprimer une seule clé ou valeur de l'objet. voici mon code. Je comprends que j'ai besoin d'inclure le * ngIf parce qu'il est asynchrone (asynchrone). Cependant, même si je l'ai utilisé le ngIf avec le 'generalInfo' qui fait référence à la component.ts

general.service.ts

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/map'; 

import { General } from '../interfaces/general.interface' 

@Injectable() 
export class GeneralService { 
    private dataAPI = '../../assets/api.json'; 

    constructor(private http: Http) { 

    } 

    getGeneralData() : Observable<General> { 
    return this.http.get(this.dataAPI) 
     .map((res:Response) => { res.json(); console.log(res.json())}) 
     .catch((error:any) => Observable.throw(error.json().error ||  'Server error')); 
    } 
} 

header.component.ts

import { Component, OnInit, DoCheck } from '@angular/core'; 
import 'rxjs/add/operator/map'; 
import { GeneralService } from '../../services/general.service'; 

@Component({ 
    selector: 'header', 
    templateUrl: `./header.component.html` 
}) 

export class headerComponent implements OnInit{ 

    public generalInfo : any; 
    public name : string; 

    constructor(
    private headerblock: GeneralService 
) {} 

    //Local Properties 
    header; 

    loadHeader() { 
    this.headerblock.getGeneralData() 
     .subscribe(
     generalInfo => { 
      this.generalInfo = generalInfo; 
      this.name = this.generalInfo.name 
     }, 
     err => { 
      console.log(err); 
     } 
    ); 

    } 

    ngOnInit() { 
    this.loadHeader(); 
    } 
} 

header.component .html

<div class="container"> 
    <div *ngIf="generalInfo"> 
    {{name}} 
    </div> 
</div> 

Avec ce code si pour le moment - il ne va pas dans l'état if NT. Je ne suis pas sûr pourquoi cela ne fonctionne pas?

Answer 1

*ngIf n'est pas exécutée, car votre fonction map ne renvoie pas quelque chose.

Donc dans votre subscribe -fonction la valeur entrante est undefined!

Vous devez retourner quelque chose au sein de votre carte-fonction:

.map((res:Response) => { console.log(res.json()); return res.json(); }) 

Et dans votre modèle, l'utiliser comme ceci:

{{ generalInfo.name }} 

En supposant que generalInfo a une propriété nommée name.