Utilisation d'un tableau à partir d'un objet observable avec ngFor et Async Pipe Angular 2

J'essaie de comprendre comment utiliser Observables dans Angular 2. J'ai ce 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));
    }
}

Ce BehaviorSubject reçoit de nouvelles valeurs comme tel à partir d'un autre service:

that._appointmentChoiceStore._appointmentChoices.next(parseObject)

Je m'y abonne sous forme d'observable dans le composant dans lequel je souhaite l'afficher:

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

Et la tentative d'afficher dans la vue comme suit:

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

Cependant, les disponibilités ne sont pas encore une propriété de l'objet observable, donc il se trompe, même si je le définis dans l'interface des disponibilités comme suit:

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

Comment puis-je afficher un tableau de manière asynchrone à partir d'un objet observable avec le tube asynchrone et * ngFor? Le message d'erreur que je reçois est:

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

Voici un exemple

// 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>

Qui a jamais trébuché sur ce post.

Je crois que c'est la bonne façon:

  <div *ngFor="let appointment of (_nextFourAppointments | async).availabilities;"> 
    <div>{{ appointment }}</div>
  </div>

Je pense que ce que tu cherches c'est ça

<article *ngFor="let news of (news$ | async)?.articles">
<h4 class="head">{{news.title}}</h4>
<div class="desc"> {{news.description}}</div>
<footer>
    {{news.author}}
</footer>

Si vous n'avez pas de tableau mais que vous essayez d'utiliser votre observable comme un tableau même s'il s'agit d'un flux d'objets, cela ne fonctionnera pas en mode natif. Je montre comment résoudre ce problème ci-dessous en supposant que vous ne vous souciez que d'ajouter des objets à l'observable, pas de les supprimer.

Si vous essayez d'utiliser une observable dont la source est de type BehaviorSubject, changez-la en ReplaySubject puis dans votre composant abonnez-vous comme ceci:

Composant

this.messages$ = this.chatService.messages$.pipe(scan((acc, val) => [...acc, val], []));

HTML

<div class="message-list" *ngFor="let item of messages$ | async">