AngularFire2后续过滤器不过滤列表答案

【问题标题】：AngularFire2 subsequent filter does not filter the listAngularFire2后续过滤器不过滤列表
【发布时间】：2017-03-18 00:56:58
【问题描述】：

我对 Angular 2 还很陌生，所以这可能真的很简单。我一直在谷歌搜索，但没有运气。我正在使用 AF2 从 Firebase 中提取玩家数据，然后尝试将列表过滤为 1。我认为我的代码显示了我正在尝试的内容......

player-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() {
    }

}

【问题讨论】：

这个代码块有点混乱，你是不是在调用 filterByHandle() 方法时试图过滤你的 observable 中的数据？
@DevonGermano 正确:-)
Firebase 中的列表是否要过滤 /player？还是 /players？
您没有共享足够的代码。您的可注入服务中的players$ 不能直接在模板中使用，因此模板的players$ 所指的内容尚不清楚。
@cartant 将所有 3 个代码文件添加到 OP。我还需要添加吗？该代码最初确实有效。我确实在显示 2 个玩家记录的页面上看到了 player$ 列表。当您单击过滤器按钮时，列表应更改为仅与handle = 'professorkill' 匹配的一名玩家。这部分不起作用，我不确定如何修复。

标签： angular firebase angularfire2

【解决方案1】：

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

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

【讨论】：