Angular2 Observables-创建我自己的-订阅者未定义

Question

我不太清楚这是一个范围界定问题，还是我如何设置可观察性的问题，但也许你可以帮忙。

首先，我的逻辑我的总体目标是能够在发送http.get请求之前检查一些数据是否保存在本地。我想做的是返回本地保存的数据(如果存在的话)，我想我可以让这个返回是可观察的，这样我就可以订阅这个函数的输出，无论它是返回本地数据还是远程数据。对这个逻辑有任何想法都将不胜感激！

我正在关注科里·雷兰的这篇博客文章来实现我自己的observable。我遇到了一个问题，无法在getData函数中定义Observer。

这是科里的工作演示

这是我不工作的演示-你可以在日志中看到，服务中的this._dataObserver是未定义的，而在Cory的中是。这就是导致我出现问题的原因。

以下是代码片段：

应用

@Component({
selector: 'my-app',
template: `
<landing-page></landing-page>    
`,
providers: [DataService],
directives: [LandingPageComponent]
})
export class App {
constructor() { }
}
bootstrap(App, [HTTP_BINDINGS])
.catch(err => console.error(err));

LandingPageComponent.ts

@Component({
selector: 'landing-page',
template : `
hello
`,
})
export class LandingPageComponent implements OnInit{
data : Observable<any[]>;
constructor(
private _dataService : DataService
) { }
ngOnInit() {
this.data = this._dataService.data$;
this._dataService.getData();
}
}

数据服务

@Injectable()
export class DataService {
data$ : Observable<any[]>; // data stream
private _baseUrl: string;
private _dataObserver : Observer<any[]>;
private _dataStore : {
data : any[]
};
constructor (
private _http: Http
) {
this._baseUrl  = 'http://56e05c3213da80110013eba3.mockapi.io/api';
this.data$ =  new Observable(observer => this._todosObserver = observer).share();
this._dataStore = { data: [] };
}
/** **************
* Public functions
*****************/
getData () {
this._http.get(`${this._baseUrl}/todos`)
.map(data => data.json())
.subscribe( data => {
this._dataStore.data = data;
console.log(this._dataObserver);   //<------ This is undefined for me!
this._dataObserver.next(this.data);
},
error => {
console.log('couldn't load data! ' + error );
});
}
}

谢谢你的任何想法

Answer 1

_dataObserver为null，因为您没有订阅相关的可观察对象。别忘了可观测者是懒惰的。。。

您可以尝试以下操作：

ngOnInit() {
this.data = this._dataService.data$.subscribe(data => { // <-----
console.log(data);
});
this._dataService.getData();
}

编辑

此外，您的代码中还有一个拼写错误：

this.data$ =  new Observable(observer => this._todosObserver = observer).share();

您应该使用_dataObserver而不是_todosObserver:

this.data$ =  new Observable(observer => this._dataObserver = observer).share();