取得したJSONをオブジェクトとして保存する方法は？

Question

JSON形式のHTTP要求の結果をTypeScriptのオブジェクトに保存する方法を教えてください。

は、ここに私のコードです：

コンポーネント：

import { Component } from '@angular/core'; 
import { DateTimeService } from './datetime.service'; 
import { DateTime } from './datetime' 

@Component({ 
    selector: 'my-app', 
    moduleId: module.id, 
    templateUrl: 'app.component.html', 
    providers: [DateTimeService] 
}) 


export class AppComponent { 

    constructor(private _dateTimeService: DateTimeService){ } 

    dateTime: DateTime = new DateTime(); 

    getDateTime() { 
    this._dateTimeService.getDateTime().subscribe(data => this.dateTime = data, 
     error => alert("error"), 
    () => alert("done")); 
    debugger; 

    alert(this.dateTime.date); 
    alert(this.dateTime.milliseconds_since_epoch); 
    alert(this.dateTime.time); 

    } 
} 

サービス：私はこのコードを実行するとDateTimeオブジェクトの

import { Http } from '@angular/http'; 
import {Injectable} from'@angular/core'; 
import 'rxjs/add/operator/map' 
import { DateTime } from './datetime' 

@Injectable() 
export class DateTimeService{ 
    constructor(private _http: Http) { } 
    getDateTime() { 
     return this._http.get('http://date.jsontest.com').map(res => <DateTime>res.json()); 
    } 
} 

すべてのプロパティが定義されていません。しかし、私のサービスで入力データがDateTimeでキャストされず、JSON.stringify(data.time)（たとえば）を使用した場合、1つのプロパティしか取得できません。

Answer 1

データが取得される前にアラートが実行されるため、すべてのアラートは未定義です。サブスクリプション内のアラートを追加する場合

getDateTime() { 
    this._dateTimeService.getDateTime().subscribe(data => this.dateTime = 
    // executed sometimes later 
    data, 
     error => alert("error"), 
    () => alert("done")); 
    debugger; 
// executed first 
alert(this.dateTime.date); 
alert(this.dateTime.milliseconds_since_epoch); 
alert(this.dateTime.time); 
} 

、あなたのアラートが、これは非同期呼び出しがあり、そのコードは、彼らが書かれている順に実行されていないので、これがある

getDateTime() { 
    this._dateTimeService.getDateTime().subscribe(data => { 
    this.dateTime = data; 
    alert(this.dateTime.date); 
    alert(this.dateTime.milliseconds_since_epoch); 
    alert(this.dateTime.time); 
    }); 
} 

動作するはずです。ビューにデータが表示されない場合は、同様の理由でデータが取得される前にビューがレンダリングされるため、ここではsafe navigation operatorまたは*ngIfが使用されます。あなたは私たちは常に非同期操作を扱っていることから、これに慣れる必要があるでしょう

;）

だからあなたはそうのような*ngIf内のテンプレートをラップすることができます

削除

<div *ngIf="dateTime"> 
    <!-- Your code here --> 
</div> 

divをdateTimeに値が入るまでテンプレートから除外します（あると仮定します）。それはあなたがに加入されている関数内ではありませんようにあなたの警告は思わ

{{dateTime?.date}} 
{{dateTime?.milliseconds_since_epoch}} 
{{dateTime?.time}}