Verwenden des equalTo-Filters zum Anzeigen von Daten in angularFire2

Question

Ich möchte Daten von Firebase zu meiner eckigen Seite hinzufügen. Ich habe ein Feld namens isActive und standardmäßig ist es auf false festgelegt. Was ich speziell machen möchte ist, nur Daten anzuzeigen isActive = true. Um dies zu erreichen, habe ich equalTo Filter in der angularFire2 verwendet. Aber mein HTML zeigt keine Daten. Hier ist meine Feuerbasis Datenbank wie folgt aussieht:

{ 
    "-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" 
} 
} 

Und meine Komponente ist wie folgt:

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

Was ist es, dass ich fehle?

Answer 1

Ersetzen Sie Ihre mit diesem, Haftungsausschluss: die Art, wie ich Ihre Daten in /posts erhalten, ist meine Codierung Präferenz, können Sie dieses Schnipsel mit Ihren zwicken.

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) 
    } 

Blick auf readAll() und wie ich die Einzelteile anmelden. Sie können die Elemente verwenden, um Ihre Daten in HTML anzuzeigen.