2017-10-27 10 views
0

firebaseのデータを私の角のページに取り込みたいと思います。私はisActiveと呼ばれるフィールドを持っており、デフォルトではfalseに設定されています。具体的には、isActive = trueというデータのみを表示します。 これを達成するために、angularFire2equalToフィルタを使用しました。しかし、私のHTMLはデータを表示しません。ここに私のfirebaseデータベースは次のようになりますされていますequalToフィルタを使用してangularFire2にデータを表示

{ 
    "-KxTcvT8K1aOhuHOa4xx" : { 
    "category" : "Angular 2/4+", 
    "createdDate" : 1509121308599, 
    "imageUrl" : "", 
    "isActive" : true, 
    "name" : "Sample test 1", 
    "title" : "test" 
}, 
    "-KxTdpCOA6eElekGECpr" : { 
    "category" : "Machine Learning", 
    "createdDate" : 1509121545084, 
    "imageUrl" : "", 
    "isActive" : false, 
    "name" : "Sample Test 2", 
    "title" : "second test" 
} 
} 

そして、私のコンポーネントは、以下のようなものです:それは私が行方不明だということです

getAll(){ 
    return this.db.list('/posts', { 
     query: { 
     orderByChild: 'createdDate', 
     equalTo: 'isActive' 
     } 
    }); 
    } 

何?

答えて

1

これを免責事項に置き換えてください:/postsでデータを取得する方法は、自分のコード設定であり、このコードを自分のものと微調整することができます。

lorem.service.ts

import { AngularFireList, AngularFireAction, DatabaseSnapshot, DatabaseReference } from 'angularfire2/database'; 
import { Observable } from 'rxjs/Observable' 

... 

    get getAll(){ 
    // get data with list 
    const list = this.db.list<any>('/posts', (query: DatabaseReference) => { 
     return query.orderByChild('createdDate').equalTo('isActive'); 
    }); 

    // return key and values, insert list 
    return this.mapNewChanges(list); 
    } 


    // HELPER 

    private mapNewChanges(list: AngularFireList<any>): Observable<AngularFireAction<DatabaseSnapshot>[]> { 

    // return key and values from `/posts` 
    return list.snapshotChanges() 
     .map(changes => { 
     return changes.map(c => ({ key: c.payload.key, ...c.payload.val() })); 
     }); 
    } 

lorem.component.ts

public items: Observable<any> | AngularFireObject<any> | AngularFireList<any>; 

    constructor(private loremService: loremService) { } 

    ngOnInit() { 
    this.items = this.queryService.getAll;   
    } 

    readAll(): void { 
    console.log(this.items) 
    } 

readAll()を見て、どのように私はアイテムをログに記録します。アイテムを使用してデータをhtmlで表示することができます。

関連する問題