*ngFor throwing invalid pipe argument AngularFireList

Question

I am having trouble understanding why my *ngFor is throwing me an invalid pipe argument with async and without it I get an error stating NgFor only supports binding to iterables such as Arrays. I have basically the same code on a separate page and it works as intended but for some reason on this page I get these errors.

I know that the information is there since when I log it to the console it prints the data from my database.

Employee-Detail.ts page - The param being received in the constructor is a snapshot of the item that comes from my firebase data reference.

    import { Component } from '@angular/core';
    import { IonicPage, NavController, NavParams } from 'ionic-angular';
    import {Observable} from 'rxjs/Observable';
    import { Profile } from '../../models/profile';
    import { CheckIn } from '../../models/check-in';
    import { CheckOut } from '../../models/check-out';
    import { AngularFireDatabase, AngularFireList } from 
    'angularfire2/database';
    import { CheckInDetailsPage } from '../../pages/check-in-details/check-in-
    details';
    import { CheckOutDetailsPage } from '../../pages/check-out-details/check-
    out-details';


    @IonicPage()
    @Component({
      selector: 'page-employee-detail',
      templateUrl: 'employee-detail.html',
    })
    export class EmployeeDetailPage {

      checkInList: Observable<CheckIn[]>;
      checkOutList: Observable<CheckOut[]>;
      public profile: any;  
      constructor(
         public navCtrl: NavController,
         public navParams: NavParams,
         public database: AngularFireDatabase,
       ) {
             this.profile = this.navParams.data;
             console.log(this.profile.firstName);

             this.checkInList = this.profile.checkInList;
             console.log(this.checkInList);

      }


      checkInDetails() {
        this.navCtrl.push('CheckInDetailsPage');
      }


      checkOutDetails() {
        this.navCtrl.push('CheckOutDetailsPage');
      }

    }

And my employee-detail.html page

    <ion-header>
        <ion-navbar>
          <ion-title>Employee Details</ion-title>
        </ion-navbar>
    </ion-header>


    <ion-content padding>
         <h1>
           {{profile.firstName}} {{profile.lastName}}
         </h1>
         <ion-list>
              <ion-item>
                  <p>Email:
                      <strong>{{profile.email}}</strong>
                  </p>

                  <p>Checked In:
                      <strong *ngIf = "profile.checkedIn === true "> Yes 
                      </strong>
                      <strong *ngIf = "profile.checkedIn === false "> No 
                      </strong>
                  </p>      
                  <button ion-button block (click)="checkInDetails()">
                      Check In List
                  </button>

                  <button ion-button block (click)="checkOutDetails()">
                       Check Out List
                  </button>

           </ion-item>

         </ion-list>


        <ion-list>

            <ion-item *ngFor="let checkIn of checkInList">
              <p>Time:
                <strong>
                    {{checkIn.time}}
                </strong> 
              </p>
            </ion-item>
      </ion-list>
    </ion-content>

Answer 1

The issue isn't quite that it's an Object, but that it's an observable. Unless you're subscribing to it or mapping, you can't get it's value. To resolve I suggest:

checkIns: CheckIn[];

constructor () {
    this.checkInList.subscribe(ci => this.checkIns = ci)
}

Then you should be able to iterate through CheckIns as expected.