ฉันพยายามทำความเข้าใจวิธีใช้ Observables ใน Angular 2 ฉันมีบริการนี้:
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));
}
}
BehaviorSubject นี้ได้รับการผลักดันค่าใหม่จากบริการอื่น:
that._appointmentChoiceStore._appointmentChoices.next(parseObject)
ฉันสมัครรับข้อมูลในรูปแบบของสิ่งที่สังเกตได้ในส่วนประกอบที่ฉันต้องการแสดงใน:
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
})
}
}
และความพยายามที่จะแสดงในมุมมองดังนี้:
<li *ngFor="#appointment of _nextFourAppointments.availabilities | async">
<div class="text-left appointment-flex">{{appointment | date: 'EEE' | uppercase}}
อย่างไรก็ตามความพร้อมใช้งานยังไม่ได้เป็นคุณสมบัติของออบเจ็กต์ที่สังเกตได้ดังนั้นจึงเกิดข้อผิดพลาดแม้คิดว่าฉันกำหนดไว้ในอินเทอร์เฟซความพร้อมใช้งานดังนี้:
export interface Availabilities {
"availabilities": string[],
"length": number
}
ฉันจะแสดงอาร์เรย์แบบอะซิงโครนัสจากวัตถุที่สังเกตได้ด้วย async ไปป์และ * ngFor ได้อย่างไร ข้อความแสดงข้อผิดพลาดที่ฉันได้รับคือ:
browser_adapter.js:77 ORIGINAL EXCEPTION: TypeError: Cannot read property 'availabilties' of undefined