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')花费几秒钟来检索数据。 那么，我怎么知道什么时候已经加载了数据呢？ 如果我知道，我可以显示一个“加载栏”。

Answer 1

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

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

并使用某些字段绑定以确保加载程序可见性

Answer 2

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

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