Question

我问这个是因为我可以阅读角度文档of(HEROES) returns an Observable<Hero[]> that emits a single value, the array of mock heroes.如果我不能使用of()你还能建议我使用什么呢？

我正在使用Rxjs of()进行角度5项目，我正在尝试返回来自两个不同文件的两个模拟的两个数组。

换句话说，我正在制作一个小应用程序，可以显示NBA东部球队包括mock-nba-est.ts和西部球队在mock-nba-west.ts。我正在学习本教程：Angular.io services tutorial试图回归我的团队

使用以下代码我遇到了这个错误：

Failed to compile.

 src/app/nba/nba.component.ts(34,8): error TS2339: Property 'subscribe' does not exist on type 'Nba[]'.`

这是我的代码：

nba.service.ts：

 import { NbaMessageService } from './nba-message.service';

 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 import { of } from 'rxjs/observable/of';
 import { Nba } from './nba';
 import { NBAE } from './mock-nba-est';
 import { NBAW } from './mock-nba-west';

@Injectable()
 export class NbaService {

constructor(private nbaMessageService: NbaMessageService) { }

getNba(): Observable<Nba[]> {
  // Todo: sent the message _after_fetching the heroes
   this.nbaMessageService.add('NbaMessageService: fetched nbae !');
   return of(NBAE && NBAW);
  }
 }

nba.component.ts

import { NbaService } from './../nba.service';
import { Component, OnInit } from '@angular/core';
import { Nba } from '../nba';
import { NBAE } from '../mock-nba-est';
import { NBAW } from '../mock-nba-west';

@Component({
 selector: 'app-nba',
 templateUrl: './nba.component.html',
 styleUrls: ['./nba.component.css']
 })
export class NbaComponent implements OnInit {

nbae = NBAE;
nbaw = NBAW;

selectedTeam: Nba;

  constructor(private nbaService: NbaService) { }


 ngOnInit() {
   this.getNba();
 }


 onSelect(nbae: Nba, nbaw: Nba): void {
  this.selectedTeam = nbaw;
   this.selectedTeam = nbae;
 }

getNba(): void {
  this.nbaService.getNba()
   .subscribe(nbae => this.nbae = nbae,
              nbaw => this.nbaw = nbaw);
  }
}

nba.component.html：

<h2>The Eastern conference</h2>
<ul class="teams">
<li *ngFor="let nba of nbae"
[class.selected]="nba === selectedTeam"
 (click)="onSelect(nba)">
  <span class="badge">{{nba.id}}</span> {{nba.name}}
  </li>
</ul>

<h2>The Western conference</h2>
<ul class="teams">
  <li *ngFor="let nba of nbaw"
  [class.selected]="nba === selectedTeam"
  (click)="onSelect(nba)">
    <span class="badge">{{nba.id}}</span> {{nba.name}}
  </li>
 </ul>


 <app-nba-detail [nba]="selectedTeam"></app-nba-detail>

模拟NBA-est.ts：

import { Nba } from './nba';

export const NBAE: Nba[] = [
{ id: 1, name: 'Boston Celtics' },
{ id: 2, name: 'Cleveland Cavaliers' },
{ id: 3, name: 'Toronto Raptors' },
{ id: 4, name: 'Milwaukee Bucks' },
{ id: 5, name: 'Indiana Pacers' },
{ id: 6, name: 'Washington Wizards' },
{ id: 7, name: 'Philadelphia 76ers' },
{ id: 8, name: 'Detroit Pistons' },
{ id: 9, name: 'New York Knicks' },
{ id: 10, name: 'Miami Heat' },
{ id: 11, name: 'Brooklin Nets' },
{ id: 12, name: 'Orlando Magic' },
{ id: 13, name: 'Charlotte Hornets' },
{ id: 14, name: 'Chicago Bulls' },
{ id: 15, name: 'Atlanta Hawks' }
 ];

模拟NBA-west.ts：

import { Nba } from './nba';

export const NBAW: Nba[] = [
 { id: 16, name: 'Houston Rockets' },
 { id: 17, name: 'Golden State Warriors' },
 { id: 18, name: 'San Antonio Spurs' },
 { id: 19, name: 'Minesota Timberwolves' },
 { id: 20, name: 'Denver Nuggets' },
 { id: 21, name: 'Portland Trail Blazers' },
 { id: 22, name: 'New Orleans Pélicans' },
 { id: 23, name: 'Oklahoma City Thunder' },
 { id: 24, name: 'Utah Jazz' },
 { id: 25, name: 'Los Angeles Clippers' },
 { id: 26, name: 'Los Angeles Lakers' },
 { id: 27, name: 'Sacramento Kings' },
 { id: 28, name: 'Memphis Greezlies' },
 { id: 29, name: 'Phoenix Suns' },
 { id: 30, name: 'Dallas Mavericks' }
 ];

Answer 1

如果要保留单独的数组，只需使用对象：

getNba(): Observable<{ nbae: Nba[], nbaw: Nba[] }> {
  // Todo: sent the message _after_fetching the heroes
   this.nbaMessageService.add('NbaMessageService: fetched nbae !');
   return of({ nbae: NBAE, nbaw: NBAW });
  }
 }

然后在组件中：

getNba(): void {
  this.nbaService.getNba()
   .subscribe(nba =>  {
     this.nbae = nba.nbae;
     this.nbaw = nba.nbaw;
   });
  }
}

是否可以使用来自Rxjs libary的Observables of（）符号来返回多个值？

1 个答案: