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

Question

我想将数据从 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'
      }
    });
  }

我缺少什么？

Answer 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.

中显示您的数据

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

Using equalTo filter to display data in angularFire2

firebase

angularfire2

angular