utilizzando una matrice da Object osservabile con ngFor e Async tubo angolare 2

Question

Sto cercando di capire come utilizzare osservabili in angolare 2. Ho questo servizio:

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

Questa BehaviorSubject è spinto nuovi valori in modo da un altro servizio:

that._appointmentChoiceStore._appointmentChoices.next(parseObject) 

mi iscrivo ad esso in forma di un osservabile nel componente voglio visualizzarlo in:

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

e il tentativo di visualizzare nella vista come modo:

<li *ngFor="#appointment of _nextFourAppointments.availabilities | async"> 
     <div class="text-left appointment-flex">{{appointment | date: 'EEE' | uppercase}} 

Tuttavia, le disponibilità is't ancora proprietà dell'oggetto osservabile in modo che gli errori di fuori, anche pensato che la definiscono nell'interfaccia disponibilità come così:

export interface Availabilities { 
    "availabilities": string[], 
    "length": number 
} 

Come posso visualizzare una matrice in modo asincrono da un oggetto osservabile con il tubo asincrono e * ngFor? Il messaggio di errore che ottengo è:

browser_adapter.js:77 ORIGINAL EXCEPTION: TypeError: Cannot read property 'availabilties' of undefined 

Answer 1

Ecco un esempio

// in the service 
getVehicles(){ 
    return Observable.interval(2200).map(i=> [{name: 'car 1'},{name: 'car 2'}]) 
} 

// in the controller 
vehicles: Observable<Array<any>> 
ngOnInit() { 
    this.vehicles = this._vehicleService.getVehicles(); 
} 

// in template 
<div *ngFor='let vehicle of vehicles | async'> 
    {{vehicle.name}} 
</div>