I am inquiring about this because I came across in the Angular documentation that of(HEROES) returns an Observableof(), do you have any alternative suggestions for me?
I am currently working on an Angular 5 project utilizing RxJS with of(), and I am attempting to retrieve two arrays from two different mock files.
To elaborate, I am developing a small application that will showcase NBA Eastern teams contained in mock-nba-est.ts and Western teams in mock-nba-west.ts. The tutorial I am following can be found here: Angular.io services tutorial, in my endeavor to return these teams.
The error I encountered with the current code is as follows:
Failed to compile.
src/app/nba/nba.component.ts(34,8): error TS2339: Property 'subscribe' does not exist on type 'Nba[]'.
Below is my existing 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: send 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' }
];