RxJS模式，用于初始化两个值之间的切换

Question

我正在尝试为切换样式的按钮/链接找到一个不错的RxJS模式，该模式基本上限制了数组的视图。

它在两个值之间切换，其中一个是静态的，另一个是来自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您对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 ），默认情况下未定义传递可能不一定是明智的选择。 如果您知道事件与行为之间的区别，则其背后的理由是withLatestFrom将与行为一起使用，行为在任何时间点都具有价值。