我创建了一个应用程序,用于从硬编码数组中加载一个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)