显示 AngularFire2 列表的所有项目

Question

请问如何重置过滤器或最初显示所有记录？

参考： https://github.com/angular/angularfire2/blob/master/docs/4-querying-lists.md#creating-a-query-with-observable-values

示例应用程序：

import { Component } from '@angular/core';
import { AngularFire, FirebaseListObservable,     FirebaseObjectObservable } from 'angularfire2';
import { Subject } from 'rxjs/Subject';

@Component({
  selector: 'app-root',
  template: `
  <ul>
    <li *ngFor="let item of items | async">
      {{ item.text }}
    </li>
  </ul>
  <div>
    <h4>Filter by size</h4>
    <button (click)="filterBy('small')">Small</button>
    <button (click)="filterBy('medium')">Medium</button>
    <button (click)="filterBy('large')">Large</button>
  </div>
  `,
})
export class AppComponent {
  items: FirebaseListObservable<any[]>;
  sizeSubject: Subject<any>;

  constructor(af: AngularFire) {
    this.sizeSubject = new Subject();

    //////////////////////////////////////////
    SHOW ALL RECORDS instead of none (at this state nothing is shown util the sizeSubject.next is set) 
    //////////////////////////////////////////
    this.items = af.database.list('/items', {
      query: {
        orderByChild: 'size',
        equalTo: this.sizeSubject
      }
    });

  }
  filterBy(size: string) {
    this.sizeSubject.next(size); 
  }
}

Answer 1

我不确定你在问什么，如果你阅读了关于你问题的url，你会得到这个：

Creating a query with observable values

Rather than specifying regular values, observables can be used to dynamically re-run queries when the observable emits a new value.

This is the magic of AngularFire2.

An RxJS Subject is imported below. A Subject is like an Observable, but can multicast to many Observers. Subjects are like EventEmitters: they maintain a registry of many listeners. See

所以在模板上添加一个新按钮：

<button (click)="filterBy()">Reset filter</button>

只需调用不带参数的 filterBy 函数，将 null 或 undefined 传递给您的过滤器将重置它

编辑

要获得所有结果，您可以按照 Tony Krøger 的建议使用 BehaviorSubject。

import { Component } from '@angular/core';
import { AngularFire, FirebaseListObservable,     FirebaseObjectObservable } from 'angularfire2';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Component({
  selector: 'app-root',
  template: `
  <ul>
    <li *ngFor="let item of items | async">
      {{ item.text }}
    </li>
  </ul>
  <div>
    <h4>Filter by size</h4>
    <button (click)="filterBy('small')">Small</button>
    <button (click)="filterBy('medium')">Medium</button>
    <button (click)="filterBy('large')">Large</button>
  </div>
  `,
})
export class AppComponent {
  items: FirebaseListObservable<any[]>;
  sizeSubject: BehaviorSubject<any>;

  constructor(af: AngularFire) {
    this.sizeSubject = new BehaviorSubject(null); // initialize the observable with a null value

    this.items = af.database.list('/items', {
      query: {
        orderByChild: 'size',
        equalTo: this.sizeSubject
      }
    });

  }
  filterBy(size: string) {
    this.sizeSubject.next(size); 
  }
}

Answer 2

为了查询运行它需要一个值。主题没有初始值。因此，在您调用 sizeSubject.next(value) 之前，查询不会运行。现在要给主题一个初始值，您可以使用 BehaviorSubject 代替，如下所示。

import { Component } from '@angular/core';
import { AngularFire, FirebaseListObservable, FirebaseObjectObservable }   from 'angularfire2';
import { Subject } from 'rxjs/Subject';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Component({
    selector: 'app-root',
    template: `
<ul>
    <li *ngFor="let item of items | async">
    {{ item.text }}
    </li>
</ul>
<div>
    <h4>Filter by size</h4>
    <button (click)="filterBy('small')">Small</button>
    <button (click)="filterBy('medium')">Medium</button>
    <button (click)="filterBy('large')">Large</button>
</div>
`,
})
export class AppComponent {
    items: FirebaseListObservable<any[]>;
    sizeSubject: Subject<any>;

    constructor(af: AngularFire) {
        // BehaviorSubjects need an initial value. and they emit only the latest value it has to the subscriber, regardless when the subscriber subscribes.
        // So as we now create a BehaviorSubject with initial value null, null will be the latest value of the subject, untill you call this.sizeSubject.next('somevalue')
        // which will then be the emitted value from the Subject.
        this.sizeSubject = new BehaviorSubject(null);

        this.items = af.database.list('/items', {
            query: {
                orderByChild: 'size',
                equalTo: this.sizeSubject
            }
        });

    }
    filterBy(size: string) {
        this.sizeSubject.next(size);
    }
}

显示 AngularFire2 列表的所有项目

Show all Items of a AngularFire2 List

angularfire2

angular

Creating a query with observable values

编辑