약속으로 작동하지만 관찰 가능하지 않은 콜백 함수

Question

내 프로젝트에는 NeDB에서 데이터를로드하는 서비스가 있습니다. 이 목적을 위해 나는 getData() 방법이있다. 내 구성 요소에서 ngOnInit() 후크를 사용하여이 메서드를 호출합니다.

여기에는 문제가있는 부분이 있습니다.

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 정도 MS 후 시작할 때 쿼리가 의도 한대로 반환됩니다.

Answer 1

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

단순히 관찰 가능한 인스턴스를 반환하는이 표현이 관찰 가능한 구독하고 성공 콜백에서 응답을 설정해야 할 수도 있습니다 무엇을 "고해상도"에. 위에서 언급 한대로 호출이 완료 될 때 몇 ms 후에 트리거하면 작동합니다.

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

약속과 비슷한 약속이 주 스레드와 별도로 비동기 적으로 실행됩니다.