*ngFor 抛出无效的管道参数 AngularFireList

Question

我无法理解为什么我的 *ngFor 向我抛出了一个无效的异步管道参数，没有它我得到一个错误，指出 NgFor 仅支持绑定到可迭代对象，例如数组。我在一个单独的页面上有基本相同的代码，它按预期工作，但由于某种原因，在这个页面上我得到了这些错误。

我知道信息就在那里，因为当我将它记录到控制台时，它会从我的数据库中打印数据。

Employee-Detail.ts 页面 - 在构造函数中接收到的参数是来自我的 firebase 数据引用的项目的快照。

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

    }

还有我的 employee-detail.html 页面

    <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

问题不在于它是一个对象，而在于它是一个可观察的。除非您订阅它或映射，否则您无法获得它的价值。要解决我的建议：

checkIns: CheckIn[];

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

然后您应该能够按预期遍历 CheckIns。