APIコールのJSONがコンポーネントに正しくマッピングされていません

Question

APIから返されたJSONをコンポーネントのプロパティにマップしようとしていますが、何らかの理由でコンポーネントからアクセスしようとするとネストされた構造にアクセスできなくなります。

data.service.ts

import { Injectable } from '@angular/core'; 
import { Http, Response, Headers } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import { UserData } from './user-data'; 

@Injectable() 
export class DataService { 

    constructor(private http: Http) {} 

    private dataUrl = 'https://habitica.com/export/userdata.json'; 
    private userId = '[removed]'; 
    private apiToken = '[removed]'; 

    getData(): Observable<UserData> { 
    let headers = new Headers(); 

    headers.append('x-api-user', this.userId); 
    headers.append('x-api-key', this.apiToken); 

    return this.http.get(this.dataUrl, { headers: headers }) 
        .map(this.extractData) 
    } 

    private extractData(res: Response) { 
    console.log(res); 
    let body = res.json(); 
    console.log(body); 
    return body || { }; 
    } 

} 

app.component.ts

import { Component, OnInit } from '@angular/core'; 
import { DataService } from './data.service'; 
import { UserData } from './user-data'; 
// Add the RxJS Observable operators we need in this app. 
import './rxjs-operators'; 


@Component({ 
    moduleId: module.id, 
    selector: 'app-root', 
    templateUrl: 'app.component.html', 
    styleUrls: ['app.component.css'], 
    providers: [ DataService ] 
}) 
export class AppComponent implements OnInit { 

    data: UserData; 

    constructor(private dataService: DataService) {} 

    ngOnInit() { 
    this.dataService.getData().subscribe(
     data => this.data = data 
    ) 
    } 

} 

私はextractDataでサービスから正しいデータを打つことができますが、それがマッピングされると、私はすべてのネストされたを失いますjson構造。

編集：

は、データがロードされていないという理由だけで、私はそれを最初にアクセスしようとすることです私は{{ data?.tasks?.dailys | json }}

を使用してそれらにアクセスすることができ判明しますか？これは正しいことですか？

Answer 1

私が正しくあなたの問題を理解している場合、これは役立つはず：

をAPIのレスポンスを受信する前に、data.tasksは未定義であるため、data.tasks.dailysは未定義です。だからあなたがチェックなしでそれを使用しているときはいつも、始めにエラーが出る。

属性を使用すると、という属性のみが使用可能かどうかを確認できます。

<div *ngIf='data && data.tasks && data.tasks.dailys'> 
    {{data.tasks.dailys}} 
</div> 

この方法data.tasks.dailysは、APIレスポンスの後すなわちその存在は、受信されたときにのみ実行されます。