显示AngularFire2列表的所有项目

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

参考：

示例应用程序：

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

从'@angular/core'导入{Component}；
从“angularfire2”导入{AngularFire，FirebaseListObservable，FirebaseObjectObservable}；
从'rxjs/Subject'导入{Subject}；
@组成部分({
选择器：'应用程序根'，
模板：`


{{item.text}


按大小筛选
小的
中等的
大的
`,
})
导出类AppComponent{
项目：可观察到的FirebaseList；
大小主题：主题；
建造师（af:AngularFire）{
this.sizeSubject=新主题（）；
//////////////////////////////////////////
显示所有记录，而不是无记录（在此状态下，在设置sizeSubject.next之前不显示任何内容）
//////////////////////////////////////////
this.items=af.database.list（“/items”{
查询：{
orderByChild:“大小”，
equalTo:这个.sizeSubject
}
});
}
过滤器组（大小：字符串）{
this.sizeSubject.next（size）；
}
}

我不知道你在问什么，如果你阅读了你问题的url，你会发现：

创建具有可观察值的查询 与其指定常规值，还可以使用可观测值 当可观察对象发出新值时，动态地重新运行查询

这就是AngularFire2的魔力

下面导入了一个RxJS主题。主体就像一个可观察的物体， 但是可以多播给许多观察者。主题类似于事件发射器： 他们维护一个包含许多侦听器的注册表。看

因此，只需在模板上添加一个新按钮：

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

---

我不知道你在问什么，如果你阅读了你问题的url，你会发现：

创建具有可观察值的查询 与其指定常规值，还可以使用可观测值 当可观察对象发出新值时，动态地重新运行查询

这就是AngularFire2的魔力

下面导入了一个RxJS主题。主体就像一个可观察的物体， 但是可以多播给许多观察者。主题类似于事件发射器： 他们维护一个包含许多侦听器的注册表。看

因此，只需在模板上添加一个新按钮：

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

---

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

从'@angular/core'导入{Component}；
从“angularfire2”导入{AngularFire，FirebaseListObservable，FirebaseObjectObservable}；
从'rxjs/Subject'导入{Subject}；
从'rxjs/BehaviorSubject'导入{BehaviorSubject}；
@组成部分({
选择器：'应用程序根'，
模板：`


{{item.text}


按大小筛选
小的
中等的
大的
`,
})
导出类AppComponent{
项目：可观察到的FirebaseList；
大小主题：主题；
建造师（af:AngularFire）{
//BehaviorSubject需要一个初始值。它们只向订阅者发出它所拥有的最新值，而不管订阅者何时订阅。
//因此，当我们现在创建初始值为null的BehaviorSubject时，null将是subject的最新值，直到您调用this.sizeSubject.next（'somevalue'）
//这将是主体发出的值。
this.sizeSubject=新行为主体（null）；
this.items=af.database.list（“/items”{
查询：{
orderByChild:“大小”，
equalTo:这个.sizeSubject
}
});
}
过滤器组（大小：字符串）{
this.sizeSubject.next（size）；
}
}

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

从'@angular/core'导入{Component}；
从“angularfire2”导入{AngularFire，FirebaseListObservable，FirebaseObjectObservable}；
从'rxjs/Subject'导入{Subject}；
从'rxjs/BehaviorSubject'导入{BehaviorSubject}；
@组成部分({
选择器：'应用程序根'，
模板：`


{{item.text}


按大小筛选
小的
中等的
大的
`,
})
导出类AppComponent{
项目：可观察到的FirebaseList；
大小主题：主题；
建造师（af:AngularFire）{
//BehaviorSubject需要一个初始值。它们只向订阅者发出它所拥有的最新值，而不管订阅者何时订阅。
//因此，当我们现在创建初始值为null的BehaviorSubject时，null将是subject的最新值，直到您调用this.sizeSubject.next（'somevalue'）
//这将是主体发出的值。
this.sizeSubject=新行为主体（null）；
this.items=af.database.list（“/items”{
查询：{
orderByChild:“大小”，
equalTo:这个.sizeSubject
}
});
}
过滤器组（大小：字符串）{
this.sizeSubject.next（size）；
}
}

或者更好，最好的方法是什么？创建另一个查询？设置过滤器？或者更好，最好的方法是什么？创建另一个查询？设置过滤器？非常感谢，它可以通过调用filterBy来工作，但如何在启动应用程序时在中自动完成？我尝试在构造函数中调用FilterBy（），但正如预期的那样，我得到：``[ts]提供的参数与调用目标的任何签名都不匹配。（method）AppComponent.filterBy（size:string）：void``如果我只调用filterBy（“”），它不起作用，也不显示任何项目本质上我喜欢在应用程序启动时显示所有项目，之后用户应该能够对其进行过滤哦，只是chan