Is it possible using Observables of() symbols from Rxjs libary to return multiple values?

Question

I am asking this because I can read in the angular doc of(HEROES) returns an Observable<Hero[]> that emits a single value, the array of mock heroes. If I can't use of() what else could you suggest to me to use instead?

I am on angular 5 project using Rxjs of() and I am trying to return two arrays of two mocks coming from two different files.

In other words I am working on a little app that could display the NBA Eastern teams includes in mock-nba-est.ts and the Western teams in mock-nba-west.ts. I am following this tutorial: Angular.io services tutorial trying to return my teams

With the following code I'have got this error:

Failed to compile.

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

Here's my code:

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>

mock-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' }
 ];

mock-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

If you want to keep separate arrays, just use an object:

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 });
  }
 }

Then in component:

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