如何將檢索到的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); 

    } 
} 

服務：

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對象的所有屬性是不確定的，當我運行這段代碼。但是，如果我沒有在我的服務中投入傳入數據的類型爲DateTime，並且使用JSON.stringify(data.time)（例如），我只能獲得一個屬性。

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> 

其去除從模板直到有dateTime（我們假設會有）的值。

另一種選擇是上述安全導航操作，您可以使用像這樣：

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