Angular 4 mit subscribe, um Daten von einem Versprechen mit einer beobachtbaren Funktion zu binden

Question

Hallo Ich habe einen PouchDB-Dienst, der einige Daten abruft und ein Versprechen mit ihm zurückgibt. Ich möchte dieses Versprechen in eine Observable konvertieren und dann in ngOnInit abonnieren, damit das Modell aktualisiert wird.

ich eine Implementierung eines Service mit einem Verfahren hergestellt, das die beobachtbare zurückkehrt, aber es funktioniert nicht (die Daten nicht auf DOM reflektiert nicht erhalten):

Component HTML:

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

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

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

Dies funktioniert nur, wenn ich „this.ngZone.run“ nach dem suscribe zum ngOnInit hinzuzufügen, wie folgt aus:

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

Aber auf diese Weise es wie Betrug ist, weil ich das Update auf DOM bin zwingen.

Kann mir jemand sagen, was ich falsch mache?

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 */); 

UPDATE

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

return Observable.fromPromise(promise); 

Answer 2

Sie sind nicht korrekt den Dienst in Ihrer Komponente zu injizieren.

Sie müssen den Dienst, den Sie in Ihre Komponente im Konstruktor injizieren, hinzufügen.

Vergessen Sie nicht, den Dienst auch Ihren Providern im Modul hinzuzufügen.

vom Angular tutorial

Genommen

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