AngularFire2 후속 필터로 목록을 필터링하지 않습니다.

Question

저는 Angular 2를 처음 사용하기 때문에 이것은 매우 간단합니다. 나는 운이없는 동안 잠시 인터넷 검색을 해왔다. 나는

플레이어 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); 
    } 

} 

... 난 내 코드는 내가 시도하고있는 무슨이다 생각 만 1. 목록을 필터링하려고 다음 AF2를 사용하여 중포 기지에서 플레이어 데이터를 당기는 해요

서비스가 작동하지만 초기 플레이어 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); 
     }); 
    } 
}