AngularFire2 Query funktioniert nicht

Question

Was ich versuche zu erreichen, ist, einige Nachrichten aus meiner Datenbank in einer Angular-App anzuzeigen, und mein Problem ist, dass ich es nicht schaffen kann, die Datenbank abzufragen. Ich bin mehr als sicher, dass es nur ein kleiner Fehler ist, aber dafür kann ich es nicht herausfinden.

Edit 1 - Nach dem Code zur Verfügung gestellt von @ David East Umsetzung i auf der „.equalTo (Kategorie))“ Linie einen Fehler nur immer bin, mir zu sagen, dass es ein Semikolon oder}) ist zu erwarten. An dieser Stelle stecke ich fest und jede Hilfe wäre großartig.

Course.component

export class CoursesListComponent implements OnInit { 
    coursesObservable; 
    categorySubject = new Subject<any>(); 

    constructor(private db: AngularFireDatabase, public auth: AuthService) { } 
    ngOnInit() { 
    this.coursesObservable = this.categorySubject.map(category => { 
     return this.db.list<any[]>('courses', ref => { 
     return ref.orderByChild('category') 
      .equalTo(category)) 
      .valueChanges(); 
    }); 
} 
    pickCategory (category: string) { 
     this.categorySubject.next(category); 
    } 

} 

Html

<ul> 
    <div class="scrollmenu"> 
    <select [(ngModel)]="category" (change)="pickCategory(category)"> 
     <option *ngFor="let category of coursesObservable | async" value="{{category.title}}">{{ category.title }}</option> 
    </select> 
    </div> 
    <div *ngFor="let course of coursesObservable | async"> 

    <a href="{{course.url}}" target="_blank" > 
     <h3>{{course.title}}</h3> 
     <p>{{course.description}}</p> 
     </a> 

    </div> 
</ul> 

Und die JSON-Datei für Firebase

{ "courses": 
     { 
      "Angular 1" : { 
      "description" : "Lorem Ipsum", 
      "title" : "Title 1", 
      "url" : "https://www.news.ro/" 
      "category" : "test" 
      }, 
      "Angular 2" : { 
      "description" : "Itent, sometimes on purpose (injected humour and the like).", 
      "title" : "Title 2", 
      "url" : "https://www.news.ro/" 
      "category" : "test" 
      } 
     } 
} 

Answer 1

Sie müssen die async Rohr verwenden, um eine beobachtbare abonnieren oder auf andere Weise zum Auftakt Nichts wird passieren.

<select [(ngModel)]="category" (change)="pickCategory(category)"> 
    <option *ngFor="let category of coursesObservable | async" value="{{category.title}}">{{ category.title }}</option> 
</select> 

Für die Kategorien auf Änderung der Aktualisierung müssen Sie Ihre pickCategory Methode ändern, um neue Werte zu emittieren, um die Suche zu starten. Dies ist am einfachsten mit einem RxJS-Thema. Sie möchten die Abfrage neu erstellen können, wenn ein Benutzer einen neuen Wert auswählt. Ein Betreff erzeugt einen Strom von Kategorienwerten. Immer wenn ein neuer Wert vorhanden ist, können Sie AngularFire anweisen, die Abfrage basierend auf dem neuen Wert neu zu erstellen.

Course.component.constructor(private db: AngularFireDatabase, public auth: AuthService) { } 
    categorySubject = new Subject<any>(); 

    ngOnInit() { 
    this.coursesObservable = this.categorySubject.map(category => { 
     return this.db.list<any[]>('courses', ref => { 
     return ref.orderByChild('category') 
        .equalTo(category)) 
        .valueChanges(); 
     }); 
    }); 
    } 

    pickCategory (category: string) { 
    this.categorySubject.next(category); 
    } 

} 

Auf diese Weise kann AngularFire die Abfrage jedes Mal neu erstellen, wenn ein neuer Wert übergeben wird.