Question

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

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

示例app：

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

为了使查询运行，它需要一个值。主题没有初始值。因此，在调用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);
    }
}

Answer 2

我不确定你在问什么，如果你在你的问题上阅读了网址，你就得到了这个：

使用可观察值
创建查询
可以使用observable来代替指定常规值   当observable发出新值时动态重新运行查询。

这是AngularFire2的神奇之处。

下面导入RxJS主题。主题就像一个观察者，   但可以多播到许多观察者。主题就像EventEmitters：   他们维护着许多听众的注册表。参见

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

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

只需在没有参数的情况下调用filterBy函数，将null或undefined传递给您的过滤器就会重置

修改

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

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); 
  }
}

显示AngularFire2列表的所有项目

2 个答案:

使用可观察值

修改