Ich versuche zu verstehen, wie Observables in Angular 2 verwendet werden. Ich habe diesen Service:
import {Injectable, EventEmitter, ViewChild} from '@angular/core';
import {Observable} from "rxjs/Observable";
import {Subject} from "rxjs/Subject";
import {BehaviorSubject} from "rxjs/Rx";
import {Availabilities} from './availabilities-interface'
@Injectable()
export class AppointmentChoiceStore {
public _appointmentChoices: BehaviorSubject<Availabilities> = new BehaviorSubject<Availabilities>({"availabilities": [''], "length": 0})
constructor() {}
getAppointments() {
return this.asObservable(this._appointmentChoices)
}
asObservable(subject: Subject<any>) {
return new Observable(fn => subject.subscribe(fn));
}
}
Diesem BehaviorSubject werden neue Werte von einem anderen Dienst übertragen:
that._appointmentChoiceStore._appointmentChoices.next(parseObject)
Ich abonniere es in Form eines Observable in der Komponente, in der ich es anzeigen möchte:
import {Component, OnInit, AfterViewInit} from '@angular/core'
import {AppointmentChoiceStore} from '../shared/appointment-choice-service'
import {Observable} from 'rxjs/Observable'
import {Subject} from 'rxjs/Subject'
import {BehaviorSubject} from "rxjs/Rx";
import {Availabilities} from '../shared/availabilities-interface'
declare const moment: any
@Component({
selector: 'my-appointment-choice',
template: require('./appointmentchoice-template.html'),
styles: [require('./appointmentchoice-style.css')],
pipes: [CustomPipe]
})
export class AppointmentChoiceComponent implements OnInit, AfterViewInit {
private _nextFourAppointments: Observable<string[]>
constructor(private _appointmentChoiceStore: AppointmentChoiceStore) {
this._appointmentChoiceStore.getAppointments().subscribe(function(value) {
this._nextFourAppointments = value
})
}
}
Und der Versuch, in der Ansicht so anzuzeigen:
<li *ngFor="#appointment of _nextFourAppointments.availabilities | async">
<div class="text-left appointment-flex">{{appointment | date: 'EEE' | uppercase}}
Die Verfügbarkeit ist jedoch noch keine Eigenschaft des beobachtbaren Objekts, sodass es zu Fehlern kommt, obwohl ich es in der Verfügbarkeitsschnittstelle wie folgt definiert habe:
export interface Availabilities {
"availabilities": string[],
"length": number
}
Wie kann ich ein Array von einem beobachtbaren Objekt mit der asynchronen Pipe und * ngFor asynchron anzeigen? Die Fehlermeldung, die ich erhalte, lautet:
browser_adapter.js:77 ORIGINAL EXCEPTION: TypeError: Cannot read property 'availabilties' of undefined
typescript
angular
rxjs
observable
C. Kearns
quelle
quelle
*ngFor="let appointment of _nextFourAppointments.availabilities | async">
availabilties
solange es sein sollteavailabilities
Antworten:
Hier ist ein Beispiel
quelle
public _appointmentChoices: Subject<any> = new Subject() getAppointments() { return this._appointmentChoices.map(object=>object.availabilities).subscribe() }
Wenn ich es in der Steuerung gleich setze, wird der Fehler angezeigt:browser_adapter.js:77Error: Invalid argument '[object Object]' for pipe 'AsyncPipe'
Wie verwandle ich das Motiv in ein Observable?public _appointmentChoices: Subject<any> = new Subject() getAppointments() { return (this._appointmentChoices.map(object=>object.availabilities).asObservable()) } }
das gibt mir denproperty asObservable does not exist on type observable
fehler : , aber _appointmentChoices ist einSubject
?Wer stolpert auch über diesen Beitrag.
Ich glaube, das ist der richtige Weg:
quelle
Ich denke, was du suchst, ist das hier
quelle
Wenn Sie kein Array haben, aber versuchen, Ihr Observable wie ein Array zu verwenden, obwohl es sich um einen Objektstrom handelt, funktioniert dies nicht nativ. Im Folgenden wird gezeigt, wie Sie dieses Problem beheben können, vorausgesetzt, Sie möchten dem Observable nur Objekte hinzufügen und nicht löschen.
Wenn Sie versuchen, ein Observable zu verwenden, dessen Quelle vom Typ BehaviorSubject ist, ändern Sie es in ReplaySubject und abonnieren Sie es in Ihrer Komponente wie folgt:
Komponente
Html
quelle
scan
Operators können Sie.pipe(toArray())
Subject
ist das Nicht-Anrufencomplete()
. Der Akku wird niemals laufen.