JSONのデータをAngular 2を使用して表示 - ObservableとAsync

Question

私はローカルのJSONファイルを呼び出している簡単なAngular 2サービスを持っています。 general.service.tsの.map関数でconsole.logにオブジェクトを取得できます。しかし、非同期呼び出しの性質上、オブジェクトから単一のキーまたは値をプリントアウトすることはできません。ここに私のコードです。

非同期であるため、* ngIfを含める必要があることを理解します。しかし、私は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を参照する 'generalInfo' でngIfを使用しているにもかかわらず、 .html

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

このコードでは、 nt。なぜこれがうまくいかないのか分かりません。

Answer 1

*ngIfが実行されていないため、map関数の何かが返されません。

したがって、あなたのsubscribe関数内では、入力値はundefinedです！

はあなたのマップ機能の中に何かを返すことがあります。

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

そして、あなたのテンプレートで

は、このようにそれを使用します。

{{ generalInfo.name }} 

がgeneralInfoがnameという名前のプロパティを持っていると仮定します。