Как сохранить извлеченный JSON как объект?

Question

Как сохранить результат HTTP-запроса из формата JSON для объекта в 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> 

который удаляет div от шаблона до тех пор, пока не будет значений в dateTime (мы предполагаем, что будет).

Другим вариантом является вышеупомянутый безопасный оператор навигации, который можно использовать следующим образом:

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