Observable of Observableにアングル4でプッシュする方法は？ RxJS

Question

私はので、私のサービスクラスのプロパティを持っている：

articles: Observable<Article[]>; 

これは、標準http.get().map()ソリューションを使用してgetArticles（）関数によって移入されます。

新しい記事を手動でこの配列にプッシュするにはどうすればよいですか。 1つはまだ持続されていないので、httpの一部ではありませんか？

私のシナリオでは、新しい記事を作成して保存する前に、Article []配列にこの新しい記事をプッシュして記事のリストに表示させたいと思います。

成分AがOnInit() ngを使用してサービスを消費し、中継区間*ngForに結果を結合する場合は更に、このサービスは、2つのコンポーネント間で共有され、は、成分Bからのサービス・アレイを同時に成分Aの中に結果を更新し、更新しますngForセクション？または、手動でビューを更新する必要がありますか？

articles: Article[] 

fetch() { 
    this.get(url).map(...).subscribe(articles => this.articles) 
} 

次にあなたが標準配列操作法を使用してarticlesリストを操作することができますように多くのおかげで、 サイモン

Answer 1

あなたはコメントで言ったように、私は、件名を使用すると思います。

articlesを配列として保存するのではなく、httpに時間がかかるので、購読して結果を待つことができるという利点があります。さらに、両方のコンポーネントがアップデートを取得します。ただ、確認する

// Mock http 
 
const http = { 
 
    get: (url) => Rx.Observable.of(['article1', 'article2']) 
 
} 
 

 
const articles = new Rx.Subject(); 
 

 
const fetch =() => { 
 
    return http.get('myUrl').map(x => x).do(data => articles.next(data)) 
 
} 
 

 
const add = (article) => { 
 
    articles.take(1).subscribe(current => { 
 
    current.push(article); 
 
    articles.next(current); 
 
    }) 
 
} 
 

 
// Subscribe to 
 
articles.subscribe(console.log) 
 

 
// Action 
 
fetch().subscribe(
 
    add('article3') 
 
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.2/Rx.js"></script>

Answer 2

代わりに全体に観察を保存するには、あなたはおそらく、ちょうど記事の配列を格納したいです。

observableを保存すると、あなたが望んでいない間違いなく、それを購読する（または| asyncを使ってレンダーする）たびにhttp呼び出しが再実行されます。

しかし、完全性のために、アイテムを追加する配列のObservableを持っている場合は、マップ演算子を使用してそのアイテムにアイテムを追加することができます。

observable.map(previousArray => previousArray.concat(itemtToBeAdded))