RxJSの基礎
そもそもRxJSとは
リアクティブプログラミングを行うJavaScriptライブラリ これを使ってAngularのリアクティブプログラミングを行う
これを実現するために使うのが Observable
これによってデータを流すための
川のようなものを作る
流れてくるデータ(ユーザーが入力したりapiのレスポンスが来たり)のことを ストリーム
と言い、
データを加工していくことを オペレータ
という(オペレータはpipeの中に書くもの)
流れてきたデータを受け取れるメソッドが Subscribe
SubscribeはObservableを返り値として受け取るだけではObservableは実行されないので
Subscribeを呼び出して実行する必要がある
Observableを継承しているSubjectを使うと色々できる 宣言はこんな感じ
private test = new Subject<string>()
Subscribeの引数
Subscribeの引数は 第一引数ではデータを受け取った際のコールバック 第二引数ではエラー時のコールバック 第三引数では処理が完了した時のコールバックを記載できる
observable.subscribe( value => console.log(value), err => {}, () => console.log('this is the end') );
Observableをテンプレートで展開
Observableをテンプレートで展開するには | async
を使う
書き方的には下記のような感じ 下記のmembersはObservable型
<li *ngFor="let member of members | async"> {{member.name}} </li>
この書き方をするとsubscribeを使用しなくてもObservableを展開することができる 単純に受け取ったデータを表示するだけの場合はこれを使うと良い