Add element to Observable array typescript
26,317
There is no point assigning the Observable that heroService.getHeroes()
returns to the hereoes
property, and reassigning it every time you add a Hero doesn't make much sense either.
Without editing HeroService, you can improve the HeroListComponent like so:
heroes: Hero[];
ngOnInit() {
this.getHeroes();
}
getHeroes() {
this.heroService.getHeroes().subscribe(heroArray => {
//The response from getHeroes() is a array of Hero so assign
// that directly to heroes property
this.heroes = heroArray;
});
}
addHero (name: string) {
//Makes sure name isn't an empty string. Typescript compiler will catch everything else.
if (name) {
this.heroService.addHero(name).subscribe(hero => {
//I assume the response from the addHero Observable is a Hero object
this.heroes.push(hero);
});
} else {
//Notify console when passed empty string.
console.error('Error! addHero was passed an empty string!');
}
}
You could probably make further improvements by editing your HeroService, but this is a good start.
Author by
Quba
Updated on October 24, 2020Comments
-
Quba over 3 years
I have an angular 2 Component which make use of service that is getting data from rest api.
import { OnInit, Component } from '@angular/core'; import { Hero } from './hero'; import { HeroService } from './hero.service2'; import { Observable } from 'rxjs'; @Component({ selector: 'my-list', templateUrl: 'app/hero-list.component.html', }) export class HeroListComponent implements OnInit { errorMessage: string; heroes: Observable<Hero[]>; mode = 'Observable'; constructor ( private heroService: HeroService ) {} ngOnInit() { this.getHeroes(); } getHeroes() { this.heroes = this.heroService.getHeroes() } addHero (name: string) { if (!name) { return; } this.heroService.addHero(name) .subscribe( hero => this.getHeroes() ); } }
How can i improve addHero ? Because right now it looks like very inefficient. I would like to just add hero that is returned by this.heroService.addHero() to heroes Observable. How do i do that?