Websocket 如何将一组可观测数据合并为一组。抛出错误属性'；管道'；不存在于类型'；可观察<；信息>；[]和#x27；

角度V6.1.10
打字脚本v 2.9.2
rxjs V6.3.3
ng2 STOMPJS V7.0.0

我正在使用的web套接字创建可观察的将启动可观察的订阅。在我的需求中，我正在基于应用程序id创建多个频道订阅，现在希望一次性订阅所有这些频道，或者我们可以说是更高阶的可观察频道，因此尝试使用各种rxjs操作符

merge

，

mergeAll

，

concat

，但迄今为止没有任何效果。以下是我迄今为止所做的工作

现在这个正在工作

appList = [{appID: '123'}, {appID: '345'}];


 const appList$ = appList.map((appID: string, idx: number) => {
            const headers = Object.assign({}, this.headers, { id: `app_${idx}` });
            const watcher = this.rxStompService.watch(`/topic/${appID}`, headers);
            console.log({ watcher }); // This is observable
            return watcher;
        });



appList$.forEach((app$) => {
            app$.subscribe((message: Message) => {
                const notification: Notification = JSON.parse(message.body);
                this.totalNotificationCount++;
                if (Object.keys(notification).length) {
                    this.notificationMessages.push(notification);
                }
            });
        });

{
  "watcher": { "_isScalar": false, "source": { "source": { "_isScalar": false } }, "operator": { "connectable": { "source": { "_isScalar": false } } } }
}

但我认为我们可以把所有可观察的东西都归纳为一个，并且可以订阅所有的。请注意，我无法使用

ForkJoin

，因为appList是动态的，因此WebSocket的数量也是动态的。以下是我将多个可观测值转换为一个可观测值的过程

试验1：使用

concat

和

map

操作符 这会产生以下错误：

类型“MonoTypeOperatorFunction”上不存在属性“pipe”

试用2：使用subscribe all after

concat

错误：类型“MonoTypeOperatorFunction”上不存在属性“subscribe”

线索3：使用

管道

log（{appList$}）返回此

错误：类型“Observable[]上不存在属性“pipe”

---

因此，我的问题是如何将所有可观察到的内容合并为一次，并订阅一次，这太神奇了；每当我把问题写在这里，再试一次，我自己就找到了答案

我已经用

from

和

mergeMap

解决了这个问题，多亏了

---

这是惊人的；每当我把问题写在这里，再试一次，我自己就找到了答案

我已经用

from

和

mergeMap

解决了这个问题，多亏了

---

是的，鸭子的力量不可低估是的，鸭子的力量不可低估你尝试过CombineTest吗？我认为在你的试验1和2中，你应该使用concat（批次）而不是concat（…批次），因为批次已经是一个观察数组。你尝试过CombineTest吗？我认为在你的试验1和2中，你应该使用concat（批处理）而不是concat（…批处理），因为批处理已经是一个可观察的数组。

const batch = appList.map((appID, idx) => {
            console.log({ appID, idx });
            const headers = Object.assign({}, this.headers, { id: `app_${idx}` });
            const watcher = this.rxStompService.watch(`/topic/${appID}`, headers);
            return watcher;
        });



concat(...batch).pipe( map (i => i)).subscribe({ });

 concat(...batch).subscribe({
            next: (v: any) => console.log(v),
            complete: () => console.log('Complete')
        });

const appList$ = appList.map((appID: string, idx: number) => {
            const headers = Object.assign({}, this.headers, { id: `app_${idx}` });
            const watcher = this.rxStompService.watch(`/topic/${appID}`, headers);
            return watcher;
        });

        console.log({ appList$ });
        appList$.pipe(
            takeUntil(this.ngUnsubscribe),
            tap((i) => {
                console.log('tapping', i);
            })
        );

  {
  "appList$": [
    {
      "_isScalar": false,
      "source": {
        "source": {
          "_isScalar": false
        }
      },
      "operator": {
        "connectable": {
          "source": {
            "_isScalar": false
          }
        }
      }
    },
    {
      "_isScalar": false,
      "source": {
        "source": {
          "_isScalar": false
        }
      },
      "operator": {
        "connectable": {
          "source": {
            "_isScalar": false
          }
        }
      }
    },
    {
      "_isScalar": false,
      "source": {
        "source": {
          "_isScalar": false
        }
      },
      "operator": {
        "connectable": {
          "source": {
            "_isScalar": false
          }
        }
      }
    },
    {
      "_isScalar": false,
      "source": {
        "source": {
          "_isScalar": false
        }
      },
      "operator": {
        "connectable": {
          "source": {
            "_isScalar": false
          }
        }
      }
    },
    {
      "_isScalar": false,
      "source": {
        "source": {
          "_isScalar": false
        }
      },
      "operator": {
        "connectable": {
          "source": {
            "_isScalar": false
          }
        }
      }
    },
    {
      "_isScalar": false,
      "source": {
        "source": {
          "_isScalar": false
        }
      },
      "operator": {
        "connectable": {
          "source": {
            "_isScalar": false
          }
        }
      }
    }
  ]
}

private watchApplications(appList: string[]) {
 const appList$ = from(appList).pipe(
            mergeMap((appID, idx) => {
                const headers = Object.assign({}, this.headers, { id: `app_${idx}` });
                const watcher = this.rxStompService.watch(`/topic/${appID}`, headers);
                return watcher;
            })
        );
        appList$
            .pipe(
                takeUntil(this.ngUnsubscribe),
                tap((f: Frame) => {
                    console.log('tapping Frame', f);
                })
            )
            .subscribe((message: Message) => {
                const notification: Notification = JSON.parse(message.body);
                console.log({ notification });
                this.totalNotificationCount++;
                if (Object.keys(notification).length) {
                    this.notificationMessages.push(notification);
                }
            });

}