0
我是Angular 2的新手,所以这可能非常简单。我一直在搜索Google,但没有运气。我是从火力地堡使用AF2然后试图过滤列表只是1.我觉得我的代码显示了我试图拉球员数据......AngularFire2后续过滤器不会过滤列表
玩家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()方法时过滤可观察数据中的数据? –
@DevonGermano正确:-) – Locohost
您想过滤/播放的是firebase中的列表吗?或/玩家? –