我创建了一个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();
}
}
工作数据服务
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);
}
}
我确信该服务有效，因为该服务使用该workingData对象生成视图，并console.log在随后的AfterContentCheckedLifeCycle上生成s ，但是我似乎无法使用该对象OnInit。我怀疑我没有正确使用LifeCycle挂钩，但是我不知道如何正确实现它。我如何立即开始setInterval？
这是可观察对象的用例。当异步操作应产生单个值时，promise和observables都具有相同的目的。
对于多个值，可观察项是更好的选择，因为这是它们的主要目的。
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 }}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句