Question

我想将数据从firebase填充到我的角度页面。我有一个名为isActive的字段，默认情况下，它设置为false。我想要具体做的是仅显示数据isActive = true。为此，我在equalTo中使用了angularFire2过滤器。但我的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

将此替换为此免责声明：我在public class WrappedViewModels { public ProductViewModel ProductViewModel { get; set; } public ProductImagesViewModel ProductImagesViewModel { get; set; } public List<ProductImagesViewModel> ProductImagesViewModels { get; set; }中获取数据的方式是我的编码首选项，您可以使用自己的代码调整此代码段。

<强> lorem.service.ts

/posts

<强> lorem.component.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() }));
      });
  }

查看public items: Observable<any> | AngularFireObject<any> | AngularFireList<any>; constructor(private loremService: loremService) { } ngOnInit() { this.items = this.queryService.getAll; } readAll(): void { console.log(this.items) }以及我如何记录这些项目。您可以使用这些项目以html格式显示您的数据。

使用equalTo过滤器在angularFire2

1 个答案: