Using an array from Observable Object with ngFor and Async Pipe Angular 2
<p>I am trying to understand how to use Observables in Angular 2.  I have this service:</p>
<pre><code>import {Injectable, EventEmitter, ViewChild} from '@angular/core';
import {Observable} from &quot;rxjs/Observable&quot;;
import {Subject} from &quot;rxjs/Subject&quot;;
import {BehaviorSubject} from &quot;rxjs/Rx&quot;;
import {Availabilities} from './availabilities-interface'

@Injectable()
export class AppointmentChoiceStore {
    public _appointmentChoices: BehaviorSubject&lt;Availabilities&gt; = new BehaviorSubject&lt;Availabilities&gt;({&quot;availabilities&quot;: [''], &quot;length&quot;: 0})

    constructor() {}

    getAppointments() {
        return this.asObservable(this._appointmentChoices)
    }
    asObservable(subject: Subject&lt;any&gt;) {
        return new Observable(fn =&gt; subject.subscribe(fn));
    }
}
</code></pre>
<p>This BehaviorSubject is pushed new values as so from another service:</p>
<pre><code>that._appointmentChoiceStore._appointmentChoices.next(parseObject)
</code></pre>
<p>I subscribe to it in the form of an observable in the component I want to display it in:</p>
<pre><code>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 &quot;rxjs/Rx&quot;;
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&lt;string[]&gt;
    
    constructor(private _appointmentChoiceStore: AppointmentChoiceStore) {
        this._appointmentChoiceStore.getAppointments().subscribe(function(value) {
            this._nextFourAppointments = value
        })
    }
}
</code></pre>
<p>And the attempt to display in the view as so:</p>
<pre><code>  &lt;li *ngFor=&quot;#appointment of _nextFourAppointments.availabilities | async&quot;&gt;
         &lt;div class=&quot;text-left appointment-flex&quot;&gt;{{appointment | date: 'EEE' | uppercase}}
</code></pre>
<p>However, availabilities isn't yet a property of the observable object so it errors out, even though I define it in the availabilities interface as so:</p>
<pre><code>export interface Availabilities {
  &quot;availabilities&quot;: string[],
  &quot;length&quot;: number
}
</code></pre>
<p>How can I display an array asynchronously from an observable object with the async pipe and *ngFor?  The error message I get is:</p>
<pre><code>browser_adapter.js:77 ORIGINAL EXCEPTION: TypeError: Cannot read property 'availabilties' of undefined
</code></pre>