Angular：合并超过 6 个 observables？

Question

我试图在我的合并中添加另一个 observable，所以从正确的开始

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 个源 Observable，您可以先创建一个 Observable 数组，然后使用扩展运算符 (...) 将它们传递给 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 个不同的 observables 之下，我可以正确键入它。另请注意，由于merge 的签名在那里不兼容，因此该问题在 stackblitz 上无法完全重现。

因此，我为可简化为的情况实施了内部合并

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);
      }

等等……