Fonction de rappel fonctionnant avec des promesses mais pas observables

Question

Dans mon projet, j'ai un service qui charge des données à partir de NeDB. Pour ce faire, j'ai une méthode getData(). Dans mon composant, en utilisant ngOnInit() hook j'appelle cette méthode.

Voici où se situe le problème.

Si getData() utilise promet tout fonctionne comme prévu et au démarrage de mon application J'ai le résultat de la requête à une base de données chargée et affichée.

getData() en utilisant des promesses

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); 
     }); 
    }) 
    } 

} 

Mais si j'essaie de le faire en utilisant rien de est chargé et observables affiché (le résultat est transmis à l'abonné undefined).

getData() en utilisant observables

getDataObs(){ 
    return new Observable(subscriber => { 
     this.db.find({}, (err, docs) => { 
     if (err) subscriber.error(err); 
     subscriber.next(docs); 
     }) 
    }) 
    } 

Component App

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); 
    } 
} 

Ce que je reçois dans mon application au démarrage

des conseils sur la Pourquoi cela arrive-t-il? Je ne pense pas que ce soit un comportement normal et présume que cela a quelque chose à voir avec la façon dont je crée observable. J'ai lu sur l'opérateur bindCallback(), dont la fonctionnalité semble être ce dont j'ai besoin ici, puisque db.find() est une fonction de rappel, mais je n'ai pas pu l'implémenter correctement.

Désolé pour le code en désordre et merci à l'avance

EDIT - 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> 

EDIT - Si j'ajoute getDataObs() méthode à un bouton, ou l'appeler quelque 100 ms après Au démarrage, il renvoie la requête comme prévu.

Answer 1

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

Cette expression renvoie simplement une instance Observable à « res », ce que vous pourriez avoir besoin de vous abonner à ce Observable et définir la réponse dans le rappel de succès. Comme vous l'avez mentionné, il fonctionne correctement lorsque vous le déclenchez après quelques ms, car l'appel est terminé. Une même chose semblable à une promesse est exécutée de manière asynchrone séparée de votre thread principal.