i trying understand how use observables in angular 2. have service:
import {injectable, eventemitter, viewchild} '@angular/core'; import {observable} "rxjs/observable"; import {subject} "rxjs/subject"; import {behaviorsubject} "rxjs/rx"; import {availabilities} './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)); } } this behaviorsubject pushed new values service:
that._appointmentchoicestore._appointmentchoices.next(parseobject) i subscribe in form of observable in component want display in:
import {component, oninit, afterviewinit} '@angular/core' import {appointmentchoicestore} '../shared/appointment-choice-service' import {observable} 'rxjs/observable' import {subject} 'rxjs/subject' import {behaviorsubject} "rxjs/rx"; import {availabilities} '../shared/availabilities-interface' declare const moment: @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 }) } } and attempt display in view so:
<li *ngfor="#appointment of _nextfourappointments.availabilities | async"> <div class="text-left appointment-flex">{{appointment | date: 'eee' | uppercase}} however, availabilities is't yet property of observable object errors out, thought define in availabilities interface so:
export interface availabilities { "availabilities": string[], "length": number } how can display array asynchronously observable object async pipe , *ngfor? error message is:
browser_adapter.js:77 original exception: typeerror: cannot read property 'availabilties' of undefined
here's example
// in service getvehicles(){ return observable.interval(2200).map(i=> [{name: 'car 1'},{name: 'car 2'}]) } // in controller vehicles: observable<array<any>> ngoninit() { this.vehicles = this._vehicleservice.getvehicles(); } // in template <div *ngfor='let vehicle of vehicles | async'> {{vehicle.name}} </div> 