回调函数使用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左右毫秒启动它按预期返回查询。

您是否在html –

@SachilaRanawaka中使用'json'过滤器。我只是试图让它现在工作。它看起来并不重要。但我已经添加了HTML问题的清晰度 –

你需要使用像'{datum | json}'在html模板中，如果可能的话，你也可以通过控制台日志记录来检查值 –

答

this.res = this.searchService.getDataObs();

这个表达式只是将返回一个可观察实例“资源”，你可能需要做的是订阅这个观察到的，设置成功回调的反应是什么。正如你所提到的那样，当你在几秒钟后触发它时正常工作，因为到那时通话完成。

this.searchService.getDataObs().subscribe(res => this.res = res)

一个可观察到的相同的承诺与您的主线程异步分离。

据我所知，'async'管道接受observable并订阅它。这就是为什么我没有在代码 –

中订阅'getDataObs（）'的原因你可以尝试将返回类型指定为Observable以getDataObs（）。像这样的getDataObs（）：Observable {} –

试图这样做。结果仍然是一样的 –

回调函数使用promise但不可观察

相关推荐