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')需要几秒钟才能检索数据。那么，我怎么知道数据何时已加载？如果我知道，我可以显示一个＆＃34;加载栏＆＃34;。

Answer 1

尝试订阅您的<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div id="featured" class="carousel slide"> <div class="carousel-inner " data-ride="carousel" id="featured"> <div class="item active"> <img src="images/carousel-lifestyle.jpg" alt="Lifestyle Photo"> </div> <div class="item"> <img src="images/carousel-mission.jpg" alt="Mission"> </div> <div class="item"> <img src="images/carousel-vaccinations.jpg" alt="Vaccinations"> </div> <div class="item"> <img src="images/carousel-fish.jpg" alt="Fish"> </div> <div class="item"> <img src="images/carousel-exoticanimals.jpg" alt="Exotic Animals"> </div> <a href="#featured" class="left carousel-control" data-slide="prev" role="button"> <span class="glyphicon glyphicon-chevron-left"></span> <!--Previous button--> </a> <a href="#featured" class="right carousel-control" data-slide="next" role="button"> <span class="glyphicon glyphicon-chevron-right"></span> <!-- Next button--> </a> </div> </div>内部组件，如下所示：

items

并使用某个字段来绑定装载程序可见性，以确保

Answer 2

我的错，setTimeout不会完全解决问题。如何使用异步方法。我不知道如何在你的代码中导入q api。

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