2016-07-15 15 views
1

私はAngularfire2を使用してFirebaseと通信します。これは、コードです。:Angular2とFirebase(AngularFire2)

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')がデータを取得するために数秒かかります。では、データがすでにロードされているときは、どうすればわかりますか?私がそれを知っていれば、私は "ローディングバー"を表示することができます。

答えて

4

次のようにコンポーネント内にごitemsに加入するようにしてください:

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

と応答のための

+0

私は試してみよう!おかげで – Matias999

+0

ありがとう@Oleg Barinov ...素晴らしい作品! – Matias999

0

私の悪い、setTimeoutは問題を完全に解決しません。どのように非同期のアプローチを使用してください。私はどのようにあなたのコードでq apiをインポートするか分からない。

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

おかげで確実にローダーの可視性のためにバインドするために、いくつかのフィールドを使用しますが、setTimeoutをは固定のために働きます時間はない? – Matias999

関連する問題