AngularFire2后续过滤器不会过滤列表

Question

我是Angular 2的新手，所以这可能非常简单。我一直在搜索Google，但没有运气。我是从火力地堡使用AF2然后试图过滤列表只是1.我觉得我的代码显示了我试图拉球员数据......

玩家fb.service.ts

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

@Injectable() 
export class PlayerFbService { 
    players$: FirebaseListObservable<any[]>; 
    player$: FirebaseObjectObservable<any>; 

    constructor(private af: AngularFire) { 
     this.players$ = this.af.database.list('/player'); 
     this.players$.subscribe(
      val => { 
       console.log('players$', val); 
      } 
     ); 
    } 

    filterByHandle(handle: string) { 
     const handleSubject = new Subject(); 
     this.players$ = this.af.database.list('/player', { 
      query: { 
       orderByChild: 'handle', 
       equalTo: handleSubject 
      } 
     }); 
     handleSubject.next(handle); 
    } 

} 

该服务的作品，我看到我的初始名单中的2名球员，但是当我点击按钮，没有任何反应。代码被def调用，并且发送的句柄是列表中的句柄值之一，但列表保持不变。不用找了。

我错过了什么？

编辑：

这里是我的调用该服务的组件模板...

player.component.html

<ul> 
    <li *ngFor="let player of players$ | async"> 
     {{ player | json }} 
    </li> 
</ul> 
<button (click)="filterByHandle('professorkill')">Filter</button> 

player.component.ts

import { Component, OnInit } from '@angular/core'; 
import { PlayerFbService } from './../../service/fb/player-fb.service'; 
import { FirebaseListObservable } from 'angularfire2'; 

@Component({ 
    selector: 'app-player', 
    templateUrl: './player.component.html', 
    styleUrls: ['./player.component.css'] 
}) 
export class PlayerComponent implements OnInit { 
    players$: FirebaseListObservable<any[]>; 

    constructor(private playerService: PlayerFbService) { 
     this.players$ = this.playerService.players$; 
    } 

    filterByHandle(handle: string) { 
     this.playerService.filterByHandle(handle); 
    } 

    ngOnInit() { 
    } 

} 

Answer 1

好像看起来像服务中缺少的部分重复订阅和建立一个数组显示主要组件模板上的记录。以下是更新/工作代码。注意：不要忘记将您的服务添加到app.module.ts，然后将其添加到提供程序数组中。

<!-- 
=============================================================================== 
src/app/admin/player/player.component.html 
--> 
<br> 
<ul> 
    <li *ngFor="let player of players"> 
     {{ player | json }} 
    </li> 
</ul> 
<button (click)="filterByHandle('professorkill')">Filter</button> 


// ============================================================================ 
// src/app/admin/player/player.component.ts 

import { Component, OnInit } from '@angular/core'; 
import { PlayerFbService } from './../../service/fb/player-fb.service'; 

@Component({ 
    selector: 'app-player', 
    templateUrl: './player.component.html', 
    styleUrls: ['./player.component.css'] 
}) 
export class PlayerComponent implements OnInit { 
    players: any[]; 

    constructor(private playerService: PlayerFbService) { 
     this.players = playerService.players; 
    } 

    filterByHandle(handle: string) { 
     this.playerService.filterByHandle(handle); 
    } 

    ngOnInit() { 
    } 

} 


// ============================================================================ 
// src/app/service/fb/player-fb.service.ts 

import { Injectable } from '@angular/core'; 
import { AngularFire, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2'; 

@Injectable() 
export class PlayerFbService { 
    public players: any[] = []; 
    private playerList$: FirebaseListObservable<any[]>; 

    constructor(private af: AngularFire) { 
     this.playerList$ = this.af.database.list('/player'); 
     this.playerList$.subscribe(val => { this.buildPlayers(val); }); 
    } 

    public filterByHandle(handle: string) { 
     this.playerList$ = this.af.database.list('/player', { 
      query: { orderByChild: 'handle', equalTo: handle } 
     }); 
     this.playerList$.subscribe(val => { this.buildPlayers(val); }); 
    } 

    private buildPlayers(val: any[]) { 
     this.players.length = 0; 
     val.forEach(element => { 
      this.players.push(element); 
     }); 
    } 
}