観測可能な配列に要素を追加typescript

Question

私は残りのAPIからデータを取得しているサービスを利用する角度2のコンポーネントを持っています。

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

addHeroを改善するにはどうすればよいですか？今は非常に非効率なように見えるからです。私はthis.heroService.addHero（）によって返されたヒーローをヒーローObservableに追加したいと思います。それ、どうやったら出来るの？

Answer 1

がhereoesプロパティに戻るObservableを割り当て、ヒーローを追加するたびにそれを再割り当てすることはそれほど意味がありません。

HeroServiceを編集せず、あなたはそうのようなHeroListComponentを向上させることができます

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

をあなたはおそらくあなたのHeroServiceを編集することにより、更なる改善を行うことができますが、これは良いスタートです。