Angular2 和 Firebase (AngularFire2)

Question

我使用 Angularfire2 与 Firebase 通信。这是代码。:

import {Component} from '@angular/core';
import {AngularFire, FirebaseListObservable} from 'angularfire2';

@Component({
  selector: 'app',
  templateUrl: `
  <ul>
    <li *ngFor="let item in items | async">
      {{ item.name }}
    </li>
  </ul>
  `,
})
class AppComponent {
  item: Observable<any>;
  constructor(af: AngularFire) {
    this.item = af.database.list('/items');
  }
}

指令af.database.list('items')需要几秒钟来检索数据。那么，我怎么知道数据何时已经加载呢？如果我知道，我可以显示 "loading bar".

Answer 1

糟糕，setTimeout 不能完全解决问题。如何使用异步方法。不过，我不确定如何在您的代码中导入 q api 。

  constructor(af: AngularFire) {
    var def = $q.defer();
    this.item = af.database.list('/items');
    def.resolve(this.item);
  }

Answer 2

尝试像这样订阅您的 items 内部组件：

constructor(af: AngularFire) {
  this.item = af.database.list('/items');
  this.item.subscribe(() => this.showLoader = false);
}

并使用一些字段绑定以确保加载器可见性

Angular2 和 Firebase (AngularFire2)

Angular2 and Firebase (AngularFire2)

firebase

typescript

firebase-realtime-database

angularfire2

angular