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