Angular 4 PouchDB nicht Service Aktualisierung

Question

Hier ist mein Service

export class LunchService { 

    private db: any; 
    lunches: any = []; 

    constructor(
    private serverService: ServerService, 
    private configService: ConfigService, 
) { 
    this.db = new PouchDB(configService.config.dbServer + '/' + configService.config.dbName); 

    this.db.find({ 
     selector: { 'type': 'lunch' }, 
    }).then((result) => { 
     // HERE 
     this.lunches = result.docs; 
    }).catch(function(err) { 
     console.log(err); 
    }); 
    } 
} 

Hier sind mein compnent

export class ListingComponent { 

    lunches: any = []; 

    constructor(
    private lunchService: LunchService 
) { 
    // IS EMPTY WHEN SET IN SERVICE? 
    this.lunches = this.lunchService.lunches; 
    } 
} 

Warum die Änderungen an die Variablen in dem Mittag Service spiegeln nicht in der Komponente? Der Parameter "Mittagessen" im Controller wird nicht ausgefüllt.

Ich vermute, es ist nicht in der Change-Erkennung? Aber wie funktioniert das?

Answer 1

Um es zu lösen, endete ich mit dem folgenden unten. Da die Daten im Service geteilt werden, scheint dies eine zufriedenstellende Lösung zu sein, aber ich bin mir nicht sicher, ob es die beste Lösung ist.

extrahierte ich einen neuen Service für die Beutel DB Interaktion einer Rückkehr zu beobachten:

export class PouchDbService { 

    private db: any; 

    constructor(
    private configService: ConfigService 
) { 
    this.db = new PouchDB(configService.config.dbServer + '/' + configService.config.dbName); 
    } 

    findDocs(searchParams) { 
    return new Observable(observer => { 
     this.db.find(searchParams).then((response) => { 
     observer.next(response); 
     }).catch((err) => { 
     console.log(err); 
     }); 
    } 
    ); 
    } 
} 

Jetzt in meinem Mittagessen Service i ein Verhalten Thema erstellt:

export class LunchService { 

    lunches: any = new BehaviorSubject([]); 

    constructor(
    private pouchDb: PouchDbService 
) { 
    this.getLunches().subscribe((response) => { 
     this.lunches.next(response['docs']); 
    }); 
    } 

    getLunches() { 
    return this.pouchDb.findDocs({ 
     selector: { type: { $eq: 'lunch' } } 
    }); 
    } 
} 

Und schließlich ich in meiner Komponente noch einmal anmelden:

export class ListingComponent implements OnInit { 

    lunches: any; 

    constructor(
    private lunchService: LunchService 
) { } 

    ngOnInit(): void { 
    this.lunchService.lunches.subscribe((lunches) => { 
     this.lunches = lunches; 
    }); 
    } 

} 

Es funktioniert ok und aktualisiert in der Komponente in Ordnung. Ich bin nur ein wenig unsicher, ob das die richtige Technik ist? Muss ich mich zweimal anmelden?

Normalerweise (non pouch db/allgemeine http-Aufrufe) könnte ich einfach die Service-Variable zuweisen, ohne ein Verhalten Betreff, und dies würde gut funktionieren und spiegeln alle Änderungen in der Komponente/UI. Aber da die Tasche eine verwendet, musste ich in beobachtbar konvertieren und die Daten auf diese Weise erhalten.

Irgendwelche Gedanken?