2つの値の間のトグルを初期化するためのRxJSパターン

Question

基本的には配列のビューを制限するトグルスタイルのボタン/リンク用の素敵なRxJSパターンを見つけようとしています。

2つの値を切り替えます.1つは静的で、もう1つはObservableから来ます（実際にはHTTP要求の結果はthis.itemsArray$です）。

TS

this.toggleClicks$ = Observable.fromEvent(this.viewAllToggle.nativeElement, 'click') 
     .scan(prev => !prev, false); 

this.itemsArray$ = Observable.of([ /* array of any */ ]); 

this.viewLimit$ = this.itemsArray$ 
     .withLatestFrom(this.toggleClicks$, (items, viewAll) => { 
     return viewAll 
      ? { nowLimit: items.length, otherLimit: 5 } 
      : { nowLimit: 5, otherLimit: items.length }; 
     }) 
     .share(); 

HTML

Showing <span>{{(viewLimit$ | async)?.nowLimit}}</span>. 
<span #viewAllToggle>Show {{(viewLimit$ | async)?.otherLimit}}</span> 

それは基本的に動作しますが、明らかな問題は、最初のクリックまで取り込まれていない初期値、です。追加しても.startWith()

this.itemsArray$ = Observable.of([ /* array of any */ ]); 

それは役に立ちません。

私には何が欠けていますか？

Answer 1

あなたが言ったことは何も得られませんでしたstartWith。私はこれがうまくいくと理解しています：

this.toggleClicks$ = Observable.fromEvent(this.viewAllToggle.nativeElement, 'click') 
     .scan(prev => !prev, false) 
     .startWith (false); // OR TRUE, dont know what behaviour you seek 

this.itemsArray$ = Observable.of([ /* array of any */ ]); 

this.viewLimit$ = this.itemsArray$ 
     .withLatestFrom(this.toggleClicks$, (items, viewAll) => { 
     return viewAll 
      ? { nowLimit: items.length, otherLimit: 5 } 
      : { nowLimit: 5, otherLimit: items.length }; 
     }) 
     .share(); 

これはあなたの試みですか？

withLatestFrom(obs$)演算子を使用すると難しいのは、obs$が最初の値を出力するまで何も出力されないということです。これは、セレクタ関数（ここではviewAll）に渡す値がないため、論理的な動作です。デフォルトではundefinedを渡すことは、必ずしも賢明な選択ではないかもしれません。イベントとビヘイビアの区別について知っているならば、この背後にある論理的根拠は、いつでもいつでも値を持つビヘイビアで使用されるwithLatestFromです。