javascript - RxJS:如何切换多个行为主题源

标签 javascript angular typescript rxjs

场景:

我有一个网格,我想在其中显示数据。我可能有两个(或更多)行为主题数据源。我还有一个切换可观察对象,它返回一个数字,指示我想显示来自哪个来源的数据(即 1 表示来源 1,2 表示来源 2,等等)。

问题:

我如何合并 n 个源,但仅从可观察切换指示的源发出记录?我的网格将订阅生成的可观察对象。当 toggle observable 发出时,我希望发出来自所选源的最新消息。

// Sources
let source1 = new BehaviorSubject([]);
let source2 = new BehaviorSubject([]);

// Toggle observable
let toggle = new BehaviorSubject(1); // default to source one

// Combined observable
let gridDataSource = ????

最佳答案

我认为 switchMap 可以解决这个问题。根据定义,它的目的是在多个源之间切换。

// Sources
let sources = [
  new BehaviorSubject([]),
  new BehaviorSubject([]),
];

// Toggle observable
let toggle = new BehaviorSubject(0); // default to the first source

// Selected observable
let gridDataSource = toggle.switchMap((i) => source[i]);

如果您不能或不想使用源数组,您可以回退到 switchMap 声明中的简单 switch-case。

let gridDataSource = toggle.switchMap((i) => {
    switch(i) {
        case 1: return source1;
        case 2: return source2;
    }
});

关于javascript - RxJS:如何切换多个行为主题源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49038772/

相关文章:

javascript - Owl Carousel 淡入淡出效果无法使用 animate.css

javascript - 在 Angular 4 中动态加载 Javascript 脚本

javascript - 使用 findIndex 检查对象数组中是否存在元素数组 - typescript

json - 如何将 fetch API 响应转换为 TypeScript 中的特定类型?

html - 动态更改元素 css 属性

javascript - 如何使 $.get() 数据对 js 可用?

javascript - NativeImage 在 Electron 的 setOverlayIcon() 中不起作用

javascript - jQuery - 动画无法正常工作?

angular - 如何在 Ionic 5 中获得 canGoBack 功能?

angular - 如何上传自定义字体并在 angular 6 中动态使用它