AngularFire2后续过滤器不过滤列表

Question

我是 Angular 2 的新手，所以这可能非常简单。我一直在谷歌上搜索一段时间但没有运气。我正在使用 AF2 从 Firebase 中提取播放器数据，然后尝试将列表过滤为 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

好的，看起来服务中缺少的部分是重复订阅者并构建一个数组以在主要组件模板上显示记录。以下是 updated/working 代码。注意：不要忘记将您的服务添加到 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);
        });
    }
}

AngularFire2后续过滤器不过滤列表

AngularFire2 subsequent filter does not filter the list

firebase

angularfire2

angular