Angular: 合并超过 6 个 observables？

Question

我尝试将另一个可观察对象添加到我的合并中，所以从正确的开始

return merge(   
          this.paginator.page, this.sort.sortChange, 
          this.cmdtyChanges.pipe(map(cmdties =>{
            return {'cmdties': cmdties};})), 
          this.bookChanges.pipe(map(book =>{
            return {'book': book};})), 
          this.start.pipe(map(update => {
            return {'start':update};})), 
          this.end.pipe(map(update => {
            return {'end':update};})))

我想添加其他两个如下所示

  return merge(   
      this.paginator.page, this.sort.sortChange, 
      this.cmdtyChanges.pipe(map(cmdties =>{
        return {'cmdties': cmdties};})), 
      this.bookChanges.pipe(map(book =>{
        return {'book': book};})), 
      this.cptyChanges.pipe(map(cpties =>{
        return {'cpties': cpties};})),
      this.traderChanges.pipe(map(traders =>{
        return {'traders': traders};})),
      this.start.pipe(map(update => {
        return {'start':update};})), 
      this.end.pipe(map(update => {
        return {'end':update};})))

但它不能编译超过 6 个...

如何绕行？

编辑

抱歉编辑，但看到答案后，我想我必须在合并后显示管道

所以我在做

.pipe(map((merged) => {
          var mustLoad = false;
          if ('book' in merged) {
            this.sendMessage(`book selected: ${merged.book}`);
            this.selBook = merged.book;
          }
          if ('traders' in merged) {
            this.sendMessage(`traders selected: ${merged.traders.length}`);
            this.selTraders = merged.traders;
            console.log('current traders', this.selTraders);
          }

当我传递超过 6 种不同类型的联合时 Observable<...> | Observable<...> | ... .pipe(map((merged) => { 中 merged 的类型变得未知并且之后的代码无法编译

Answer 1

RxJS 只为有限数量的组合准备了类型。所以如果你有超过 6 个源 Observables，你可以先制作一个 Observables 数组，然后使用扩展运算符 (...) 将它们传递到 merge():

const sources = [
  this.paginator.page,
  this.sort.sortChange,
  // other-sources,
];

merge(...sources).subscribe();

具有 7 个源 Observable 的演示：https://stackblitz.com/edit/rxjs-luldtu?devtoolsheight=60

Answer 2

根据我的评论，我发现使用扩展运算符会使结果始终未知，而如果我保持在 6 个不同的可观察量之下，我可以正确输入它。另请注意，此问题在 stackblitz 上无法完全重现，因为 merge 的签名在那里不兼容。

因此，我对可简化为

的案例实施内部合并

interface MyChange {
  myvalue: string[], mytype: 'traders'|'cpties'|'cmdties'
}

并且 - 尽可能避免类型断言以保持类型安全 - 我将整个包装合并管理为

  return merge(
    this.paginator.page,
    this.sort.sortChange,
    this.bookChanges.pipe(map(book => {
      return { 'book': book };
    })),

    (merge(this.cmdtyChanges.pipe(map(cmdties => {
      const ret : MyChange = { 'myvalue': cmdties, 'mytype': 'cmdties' };
      return ret;
    })),
      this.cptyChanges.pipe(map(cpties => {
      const ret : MyChange =  { 'mytype': 'cpties', 'myvalue': cpties };
      return ret;
      })),
      this.traderChanges.pipe(map(traders => {
      const ret : MyChange =  { 'mtyype': 'traders', 'myvalue': traders };
      return ret;
      })))   ),

    this.start.pipe(map(update => {
      return { 'start': update };
    })),
    this.end.pipe(map(update => {
      return { 'end': update };
    }))
  )

以这样一种方式，我终于可以将安全输入的——不是未知的——结果输送到

    .pipe(map((merged ) => {
      var mustLoad = false;
      if ('book' in merged) {
        this.sendMessage(`book selected: ${merged.book}`);
        this.selBook = merged.book;
      }
      if ('mytype' in merged && merged.mytype == 'traders') {
        this.sendMessage(`traders selected: ${merged.myvalue.length}`);
        this.selTraders = merged.myvalue;
        console.log('current traders', this.selTraders);
      }

等等...

Angular: 合并超过 6 个 observables？

Angular: merge more than 6 observables?

observable

rxjs

typescript

angular

编辑