來自服務的數據無法在Angular2的OnInit中訪問

Question

我創建了一個WorkingData對象，用於在組件之間傳遞某些數據。 today ，該對象的一個​​成員是包含當前日期的Date對象。 我想在setInterval函數中每秒更新一次，但是workingData未定義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();
  }
}

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

我確信該服務有效，因為該服務在隨后的AfterContentChecked LifeCycle上使用workingData對象和console.log生成視圖，但我似乎無法使用對象OnInit 。 我懷疑我沒有正確使用LifeCycle掛鈎，但是我不知道如何正確實現它。 我如何立即開始setInterval ？

Answer 1

您正在嘗試解決數據之前更改數據。 getWorkingData()是異步函數，它返回一個getWorkingData() ，而不是實際數據。 當數據實際可用時（在回調中）嘗試進行更新。

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

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

Answer 2

這是可觀察對象的用例。 當異步操作應產生單個值時，promise和Observable的目的相同。

對於多個值，可觀察項是更好的選擇，因為這是它們的主要目的。

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結果可以通過

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

但是在大多數情況下，這將是多余的，因為可以在任何需要的地方訂閱workingData$ ，並且可以使用async管道在視圖中綁定可觀察對象：

{{ workingData$ | async }}