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

Question

I created a WorkingData object that I use to pass certain data between components. One member of the object is today which is a Date object containing the current date. I want to update this every second in a setInterval function, but the workingData object is undefined at this point giving me the console error:

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

I'm confident the the service is valid because it generates the view using the workingData object and console.log s on a subsequent AfterContentChecked LifeCycle, but I cannot seem to use the object OnInit . I suspect I'm not using a LifeCycle hook properly, but I don't understand how to implement it correctly. How can I immediately begin the setInterval ?

Answer 1

You're trying to alter the data before it's resolved. getWorkingData() is asynchronous function that's returning a promise, not the actual data. Try doing your updates when the data is actually available (in the callback).

getWorkingData() {
  return this._workingDataService.getWorkingData();
}

ngOnInit() {
  this.getWorkingData().then(workingData => {
    this.workingData = workingData;
    // do your magic here
    });
...
}

Answer 2

This is a use case for observables. Both promises and observables serve the same purpose when an asynchronous operation should result in a single value.

For multiple values observables is better choice because it is their primary purpose.

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 result can be obtained with

    this.workingData$.subscribe(data => this.workingData = data);

But in most scenarios it will be redundant, because workingData$ can be subscribed wherever needed, and observables can be bound in view with async pipe:

{{ workingData$ | async }}