Angular2 - Firebase数据库路由

Question

我创建了一个应用程序，用于从硬编码数组中加载一个Players列表，当单击其中一个时，该播放器的详细信息将显示在一个新组件中。我正在尝试而不是硬编码数组来从Firebase数据库获取数据。数据正确加载到列表中但是当我单击某个项时，我收到错误“ERROR TypeError：您提供了一个无效的对象，其中包含一个流。您可以提供Observable，Promise，Array或Iterable。”

玩家组件

@Component({

    selector: 'players',
    template: `
    <h1>{{title}}</h1>
    <ul>
        <li class="text" *ngFor="let player of players | async" (click)="onSelect(player)">
            {{player.name}}
        </li>
    </ul>
    <div *ngIf="selectedPlayer">
        <h1>{{selectedPlayer.name}}</h1> <h2>{{selectedPlayer.age}}</h2>
    </div>
    `,
    styleUrls: ['./players.component.css'],
    providers: [PlayerService]

})

export class PlayersComponent implements OnInit{

    title = 'Players'
    selectedPlayer: Player;
    players: FirebaseListObservable<any[]>;

    constructor(
        private playerService: PlayerService,
        private router: Router,    
        ){}

    getPlayers(){
        // this.playerService.getPlayers().then(players => this.players = players);
        this.players = this.playerService.getPlayers();
    }

    onSelect(player: Player): void {
        this.selectedPlayer = player;
        this.router.navigate(['/detail', this.selectedPlayer.id]);
    }

    ngOnInit(): void {
        this.getPlayers();
    }

    gotoDetail(): void {
        this.router.navigate(['/detail', this.selectedPlayer.id]);
    }

}

玩家详细信息组件

@Component({

    selector: 'player-details',
    template: `
    <h1>Details</h1>
    <div *ngIf="player">
      <h2>{{player.name}} details!</h2>
    </div>
    `
})

export class PlayerDetailsComponent implements OnInit{

    title = 'Players Details'

    @Input() player: Player;
    constructor(
      private playerService: PlayerService,
      private route: ActivatedRoute,
      private location: Location
    ) {}

    ngOnInit(): void {
      this.route.paramMap
        .switchMap((params: ParamMap) => this.playerService.getPlayer(+params.get('id')))
        .subscribe(player => this.player = player);

    }
}

玩家服务

@Injectable()
export class PlayerService {

     players: FirebaseListObservable<any[]>;
        constructor(db: AngularFireDatabase) {
            this.players = db.list('/players');
        }
    getPlayers(): FirebaseListObservable<any[]> {
        return this.players;
    } 

    getPlayer(id: number): Observable<Player> {
    return this.getPlayers()
                .switchMap(items => items.find(player => player.id === id));
    }
}

错误记录

core.es5.js:1020 ERROR TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
    at Object.subscribeToResult (subscribeToResult.js:73)
    at SwitchMapSubscriber.webpackJsonp.../../../../rxjs/operator/switchMap.js.SwitchMapSubscriber._innerSub (switchMap.js:101)
    at SwitchMapSubscriber.webpackJsonp.../../../../rxjs/operator/switchMap.js.SwitchMapSubscriber._next (switchMap.js:94)
    at SwitchMapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at Notification.webpackJsonp.../../../../rxjs/Notification.js.Notification.observe (Notification.js:32)
    at QueueAction.webpackJsonp.../../../../rxjs/operator/observeOn.js.ObserveOnSubscriber.dispatch (observeOn.js:87)
    at QueueAction.webpackJsonp.../../../../rxjs/scheduler/AsyncAction.js.AsyncAction._execute (AsyncAction.js:111)
    at QueueAction.webpackJsonp.../../../../rxjs/scheduler/QueueAction.js.QueueAction.execute (QueueAction.js:33)
    at QueueScheduler.webpackJsonp.../../../../rxjs/scheduler/AsyncScheduler.js.AsyncScheduler.flush (AsyncScheduler.js:36)
    at QueueAction.webpackJsonp.../../../../rxjs/scheduler/QueueAction.js.QueueAction.schedule (QueueAction.js:27)