回调函数使用promise但不可观察
在我的项目中,我有一个从NeDB加载数据的服务。为此我有一个方法getData()
。在我的组件中,使用ngOnInit()
钩子,我调用这个方法。回调函数使用promise但不可观察
问题出在哪里。
如果getData()
使用承诺一切按预期工作,并在我的应用程序的启动我有一个查询的结果加载和显示的数据库。
的getData()使用承诺
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import * as Datastore from 'nedb';
import * as path from 'path';
@Injectable()
export class SearchService {
db: any;
constructor() {
this.db = new Datastore({
filename: path.resolve('src/assets/db.json'),
autoload: true,
});
}
getData(){
return new Promise((resolve, reject) => {
this.db.find({}, (err, docs) => {
if (err) reject(err);
resolve(docs);
});
})
}
}
但是,如果我试图做到这一点使用观测没有被加载和显示(传递给用户的结果是undefined
)。
的getData()使用观测
getDataObs(){
return new Observable(subscriber => {
this.db.find({}, (err, docs) => {
if (err) subscriber.error(err);
subscriber.next(docs);
})
})
}
应用组件
import { Component, OnInit } from '@angular/core';
import { SearchService } from './search_service/search.service';
import { Observable } from 'rxjs/Observable';
import * as Datastore from 'nedb';
import * as electron from 'electron';
import * as path from 'path';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [SearchService]
})
export class AppComponent implements OnInit {
title = 'app';
datum;
res;
constructor(private searchService: SearchService){ }
ngOnInit(){
this.getData();
this.res = this.searchService.getDataObs();
}
getData(){
this.searchService.getData().then(res => this.datum = res);
}
}
任何提示上为什么发生这种情况?我不认为这是正常的行为,并且认为它与我创建可观察的方式有关。我已阅读bindCallback()
运算符,其功能似乎是我在这里需要的,因为db.find()
是一个回调函数,但我无法正确实现它。
对不起
编辑乱码并在此先感谢 - 编辑 HTML
<!--The whole content below can be removed with the new code.-->
<div style="text-align:center">
<h1>
Welcome to {{title}}!!
Data: {{datum}}
Res: {{res | async}}
</h1>
- 如果我添加getDataObs()
方法按钮,或称之为后100左右毫秒启动它按预期返回查询。
this.res = this.searchService.getDataObs();
这个表达式只是将返回一个可观察实例“资源”,你可能需要做的是订阅这个观察到的,设置成功回调的反应是什么。正如你所提到的那样,当你在几秒钟后触发它时正常工作,因为到那时通话完成。
this.searchService.getDataObs().subscribe(res => this.res = res)
一个可观察到的相同的承诺与您的主线程异步分离。
据我所知,'async'管道接受observable并订阅它。这就是为什么我没有在代码 –
中订阅'getDataObs()'的原因你可以尝试将返回类型指定为Observable以getDataObs()。像这样的getDataObs():Observable
试图这样做。结果仍然是一样的 –
您是否在html –
@SachilaRanawaka中使用'json'过滤器。我只是试图让它现在工作。它看起来并不重要。但我已经添加了HTML问题的清晰度 –
你需要使用像'{datum | json}'在html模板中,如果可能的话,你也可以通过控制台日志记录来检查值 –