web-dev-qa-db-ja.com

Angular 4？で配列のObservableにプッシュする方法？RxJS

サービスクラスにプロパティがあります。

_articles: Observable<Article[]>;
_

標準のhttp.get().map()ソリューションを使用するgetArticles（）関数によって設定されます。

どうすればこの配列に新しい記事を手動でプッシュできますか？まだ永続化されていないため、http getの一部ではありません

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

さらに、このサービスは2つのコンポーネント間で共有されます。コンポーネントAがng OnInit()を使用してサービスを消費し、結果を繰り返しセクション_*ngFor_にバインドした場合、サービス配列を更新しますコンポーネントBは、コンポーネントAのngForセクションの結果を同時に更新しますか？または、ビューを手動で更新する必要がありますか？

どうもありがとう、サイモン

javascriptangularrxjsobservable
9
simon_www

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

配列として保存するのではなく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>
7
Richard Matsen

オブザーバブル全体を保存するのではなく、おそらく記事の配列を保存するだけです。

_articles: Article[]

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

次に、標準の配列操作メソッドを使用して、articlesリストを操作できます。

オブザーバブルを保存すると、サブスクライブするたびにhttp呼び出しが再実行されます（または_| async_を使用してレンダリングします）。

ただし、完全を期すために、アイテムを追加する配列のObservableがある場合は、そのマップ演算子を使用して、指定されたアイテムを追加できます。

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

1
ehrencrona

ex from angular 4 book ng-book

Subject<Array<String>> example =  new Subject<Array<String>>();


Push(newvalue:String):void
{
  example.next((currentarray:String[]) : String[] => {
    return  currentarray.concat(newValue);
   })

}

example.nextで次のことは、observableに保存されている現在の配列値を取得し、それに新しい値を連結して、新しい配列値をサブスクライバーに発行することです。これはラムダ式です。subject.getValue（）メソッドに保存された最後の値を保持するため、これはサブジェクトオブザーバブルでのみ機能すると思います。

0
yfdgvf asdasdas