*NGF用于抛出无效管道参数AngularFireList

我很难理解为什么我的*ngFor抛出了一个带有async的无效管道参数，如果没有它，我会得到一个错误，说明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');
      }

    }

从'@angular/core'导入{Component}；
从“离子角度”导入{IonicPage，NavController，NavParams}；
从“rxjs/Observable”导入{Observable}；
从“../../models/Profile”导入{Profile}；
从“../../models/check-in”导入{CheckIn}；
从“../../models/check-out”导入{CheckOut}；
从导入{AngularFireDatabase，AngularFireList}
“angularfire2/数据库”；
从“../../pages/签入详细信息/签入”导入{CheckInDetailsPage}-
"详情";；
从“../../pages/check out details/check”导入{CheckOutDetailsPage}-
"详情",；
@IonicPage（）
@组成部分({
选择器：“页面员工详细信息”，
templateUrl:“employee detail.html”，
})
导出类EmployeeDetailPage{
检查列表：可观察；
检查大纲：可观察；
公众简介：任何；
建造师(
公共navCtrl:NavController，
公共导航参数：导航参数，
公共数据库：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'）；
}
签出详细信息（）{
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>

员工详细信息
{{profile.firstName}{{profile.lastName}}
电邮：
{{profile.email}}

入住：
是

否


登记表
结帐单
时间：

{{checkIn.time}

---

问题不在于它是一个物体，而在于它是一个可观察的物体。除非您订阅它或映射，否则无法获取它的值。为了解决这个问题，我建议：

checkIns: CheckIn[];

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

---

然后，您应该能够按照预期迭代签入

你能从开发者控制台显示checkInList吗？将它添加到帖子中，感谢你提醒我忘记添加它。你的

checkInList

是一个对象，而不是数组。我收到一个错误，订阅不是一个函数。我尝试使用

this.checkInList.subscribe（ci=>this.checkIns=ci）

和my navparams.data中的相同错误，但都引发了相同的错误，您必须从rxjs库导入它<代码>从'rxjs/Rx'导入{Subscription，Observable}现在我得到错误类型错误：无法读取未定义的属性'subscripte'。我想这是因为签入数组没有初始化，所以我将其设置为null，但仍然会得到相同的错误。在变量设置为this.checkInList=this.profile.checkInList之后，您订阅了它吗

this.checkInList=this.profile.checkInList；this.checkInList.subscribe（ci=>this.checkIns=ci）