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

好的看起来服务中缺少的部分是重复订阅者并构建一个数组来显示主要组件模板上的记录。以下是更新/工作代码。注意：不要忘记将您的服务添加到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后续过滤器不会过滤列表

1 个答案: