使用equalTo过滤器在angularFire2中显示数据答案

【问题标题】：Using equalTo filter to display data in angularFire2使用equalTo过滤器在angularFire2中显示数据
【发布时间】：2017-10-27 18:53:18
【问题描述】：

我想将数据从 firebase 填充到我的 Angular 页面。我有一个名为isActive 的字段，默认情况下，它设置为false。我特别想做的是只显示数据isActive = true。为此，我在angularFire2 中使用了equalTo 过滤器。但是我的 html 没有显示任何数据。这是我的 firebase 数据库的样子：

{
  "-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'
      }
    });
  }

我错过了什么？

【问题讨论】：

标签： angular firebase angularfire2

【解决方案1】：

用这个替换你的，免责声明：我在 /posts 中获取你的数据的方式是我的编码偏好，你可以用你的调整这个 sn-p。

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 中显示您的数据。

【讨论】：