Angular 4 utilisant l'abonnement pour lier des données à partir d'une promesse avec une observable ne fonctionnant pas

Question

Bonjour J'ai un service PouchDB qui récupère des données et renvoie une promesse avec lui. Je veux convertir cette promesse en observable, puis m'abonner à ngOnInit afin que le modèle soit mis à jour.

I a fait une mise en œuvre d'un service avec une méthode qui renvoie l'observable, mais il ne fonctionne pas (les données ne soit pas réfléchi sur DOM):

Composant HTML:

<h1>{{title}}</h1> 
<ul> 
    <li *ngFor="let platform of platforms"> 
    <a href="#">{{ platform }}</a> 
    </li> 
</ul> 

composant TS :

import { Component, OnInit } from '@angular/core'; 
import { PouchDbBuilder } from './PouchDbBuilder'; 
import { PlatformsService } from './services/PlatformsService'; 

@Component({ 
    selector: 'platforms', 
    templateUrl: './platforms.component.html' 
}) 
export class PlatformsComponent implements OnInit { 
    title : string; 
    platforms: Array<string>; 
    private platformsService; 

    constructor() { 
    this.title = "All Platforms"; 
    let serviceName = 'http://xxxx.net:5984/'; 
    let pouchDbBuilder = new PouchDbBuilder(serviceName); 
    this.platformsService = new PlatformsService(pouchDbBuilder); 
    } 

    ngOnInit() { 
    this.platformsService.getPlatforms().subscribe(platforms => { 
     this.platforms = platforms; 
    }); 
    } 
} 

service TS:

import { Injectable } from '@angular/core'; 
    import {PouchDbBuilder} from './PouchDbBuilder'; 
    import {PlatformsDataProvider} from './PlatformsDataProvider'; 
    import { Observable } from "rxjs/Observable"; 

    @Injectable() 
    export class PlatformsService { 

    private platformsProvider; 

    constructor(private pouchDbBuilder: PouchDbBuilder) { 
     this.platformsProvider = new PlatformsDataProvider(this.pouchDbBuilder); 
    } 

    getPlatforms(): Observable<Array<string>> { 
    return new Observable(observer => { 
     this.platformsProvider.getPlatforms().then(platforms => { 
     observer.next(platforms); 
     }).catch(err => { 
     console.error(err); 
     }); 
    }); 
    } 
    } 

Cela ne fonctionne que si j'ajouter « this.ngZone.run » après l'incription à l'ngOnInit, comme ceci:

ngOnInit() { 
    this.platformsService.getPlatforms().subscribe(platforms => { 
     this.ngZone.run(() => { 
     this.platforms = platforms; 
     }); 
    }); 
    } 

Mais cette façon, il est comme la tricherie parce que je suis forcer la mise à jour sur les DOM. Est-ce que quelqu'un peut me dire ce que je fais mal?

Answer 1

import 'rxjs/add/observable/fromPromise'; 

var subscription = Observable.fromPromise(your promise data); 
subscription.subscribe(data => /* Do anything with data received */, 
         error => /* Handle error here */); 

MISE À JOUR

var promise = this.platformsProvider.getPlatforms().then(platforms => { 
     return platforms.json(); 
     }); 

return Observable.fromPromise(promise); 

Answer 2

Vous n'êtes pas injecter le service dans votre composant correctement.

Vous devez ajouter le service que vous injectez dans votre composant dans le constructeur. N'oubliez pas d'ajouter également le service à vos fournisseurs dans le module.

Pris du Angular tutorial

import { MessageService } from './message.service'; 
... 
constructor(private messageService: MessageService) { } 
... 
getHeroes(): Observable<Hero[]> { 
    // Todo: send the message _after_ fetching the heroes 
    this.messageService.add('HeroService: fetched heroes'); 
    return of(HEROES); 
}