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}}

如何将检索到的JSON保存为对象？

1 个答案: