无法在Angular2中的NIT上访问来自服务的数据

我创建了一个

WorkingData

对象，用于在组件之间传递某些数据。对象的一个成员是

today

，它是包含当前日期的

Date

对象。我想在

setInterval

函数中每秒更新一次，但此时未定义

workingData

对象，导致控制台错误：

Cannot set property 'today' of undefined

app.component.ts

import { Component, OnInit, AfterContentChecked } from '@angular/core';
import { WorkingData } from './services/working-data/working-data';
import { WorkingDataService } from './services/working-data/working-data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [ WorkingDataService ]
})
export class AppComponent implements OnInit, AfterContentChecked {

  workingData: WorkingData;

  constructor(public _workingDataService: WorkingDataService) { }

  getWorkingData() {
    this._workingDataService.getWorkingData().then(workingData => this.workingData = workingData);
  }

  ngOnInit() {
    this.getWorkingData();
    console.log('OnInit()');
    console.log(this.workingData);           // doesn't work
    // setInterval(this.updateTime(), 1000); // doesn't work
  }
  ngAfterContentChecked() {
    console.log('AfterContentChecked()');
    console.log(this.workingData);           // doesn't work the first call but does after it is called again at some later point
    // setInterval(this.updateTime(), 1000); // doesn't work
  }
  updateTime() {
      this.workingData.today = new Date();
  }
}

working-data.service.ts

import {Injectable} from '@angular/core';
import {WorkingData} from './working-data';
import {WORKINGDATA} from './mock-working-data';

@Injectable()
export class WorkingDataService {
  getWorkingData(): Promise<WorkingData> {
    return Promise.resolve(WORKINGDATA);
  }
}

从'@angular/core'导入{Injectable}；
从“./工作数据”导入{WorkingData}；
从“./mock working data”导入{WORKINGDATA}；
@可注射（）
导出类WorkingDataService{
getWorkingData（）：承诺{
返回承诺。解析（工作数据）；
}
}

---

我确信该服务是有效的，因为它使用

workingData

对象和

控制台生成视图。在随后的
AfterContentChecked
生命周期中记录
s，但我似乎无法使用对象
OnInit
。我怀疑我没有正确地使用生命周期挂钩，但我不知道如何正确地实现它如何立即开始
设置间隔
？
您试图在数据解析之前更改数据
getWorkingData（）
是一个异步函数，返回的是承诺，而不是实际数据。当数据实际可用时（在回调中），尝试进行更新

您试图在数据解析之前对其进行更改
getWorkingData（）
是一个异步函数，返回的是承诺，而不是实际数据。当数据实际可用时（在回调中），尝试进行更新

这是一个可观察的用例。当异步操作应产生单个值时，承诺和可观测值都有相同的用途

对于多个可观测值来说，这是更好的选择，因为这是它们的主要目的

import { Observable } from 'rxjs';
...
export class AppComponent {
  workingData$: Observable<WorkingData>;

  constructor(public _workingDataService: WorkingDataService) {
    this.workingData$ = Observable.interval(1000).startWith('initial value')
    .concatMapTo(Observable.fromPromise(_workingDataService.getWorkingData()))
    .do(data => data.today = new Date)

}

但在大多数情况下，它是多余的，因为
workingData$
可以在任何需要的地方订阅，并且可以使用
async
管道在视图中绑定可观测数据：

{{ workingData$ | async }}

这是一个可观察的用例。当异步操作应产生单个值时，承诺和可观测值都有相同的用途

对于多个可观测值来说，这是更好的选择，因为这是它们的主要目的

import { Observable } from 'rxjs';
...
export class AppComponent {
  workingData$: Observable<WorkingData>;

  constructor(public _workingDataService: WorkingDataService) {
    this.workingData$ = Observable.interval(1000).startWith('initial value')
    .concatMapTo(Observable.fromPromise(_workingDataService.getWorkingData()))
    .do(data => data.today = new Date)

}

但在大多数情况下，它是多余的，因为
workingData$
可以在任何需要的地方订阅，并且可以使用
async
管道在视图中绑定可观测数据：

{{ workingData$ | async }}

既然您肯定可以访问
this.workingData
？
this.\u workingDataService.getWorkingData（）
是异步的，为什么不在回调中设置
（并启动更新间隔）。您无法在
ngOnInit
中同步获取其结果。你不应该。要在setInterval函数中每秒更新一次，observable比promise更好。请记住，您可以从区间创建observable并订阅它<代码>可观察。间隔（1000）
@jornsharpe我已经添加了我的服务。你介意让我看看在回调中设置它吗？我还不确定如何使用服务进行回调。@estus我还没有学会可观察性。如果时间不太长，您愿意在这个简单的示例中向我展示一下吗？为什么不在回调中设置
今天
（并启动更新间隔），因为您肯定可以访问
这个.workingData
？
这个。\u workingDataService.getWorkingData（）
是异步的。您无法在
ngOnInit
中同步获取其结果。你不应该。要在setInterval函数中每秒更新一次，observable比promise更好。请记住，您可以从区间创建observable并订阅它<代码>可观察。间隔（1000）
@jornsharpe我已经添加了我的服务。你介意让我看看在回调中设置它吗？我还不确定如何使用服务进行回调。@estus我还没有学会可观察性。如果时间不太长，你愿意在这个简单的例子中告诉我吗？在ngOnInit中观察到解析后开始间隔似乎是合乎逻辑的。我同意这似乎也是合乎逻辑的，但我得到了同样的错误。但我知道该服务正在工作，因为其他组件使用相同的服务在视图中呈现其数据。您现在可以更新原始帖子中的代码吗，这样我们就可以看到它现在的样子了？在ngOnInit中观察到解析后开始间隔似乎合乎逻辑我也同意这似乎合乎逻辑，但我得到了相同的错误。我知道该服务正在工作，因为其他组件使用相同的服务在视图中呈现其数据。您现在可以更新原始帖子中的代码，以便我们可以看到它目前的样子吗？