Angular 2 - RxJS 切换映射问题答案

【问题标题】：Angular 2 - RxJS Switch Map IssueAngular 2 - RxJS 切换映射问题
【发布时间】：2017-10-18 00:35:06
【问题描述】：

我正在尝试在我的应用程序中设置无限滚动部分。为此，我使用this component 来处理滚动事件等。当滚动到达 div 的底部时，我正在调用一个函数来获取更多数据。到目前为止一切顺利。

为了让这个函数更有效率，我试图在调用之前等待几秒钟，并确保数据得到正确处理。为此，我一直在查看Angular website that showcases a wikipedia search 上显示的示例。

我的设置与文章中显示的类似，我的问题是当我调用 switchMap() 时出现以下错误：

Type 'void' is not assignable to type 'ObservableInput<{}>'

这是我的代码示例：

private scrollEndActive: Subject<boolean> = new Subject<boolean>();

ngOnInit() {
    ...
    this.scrollEndActive
        .debounceTime(1000)
        .distinctUntilChanged()
        .switchMap(data => {
            // ... get data from server
        })
}

...

// event to trigger call to server
scrollEnd() {
    this.scrollEndActive.next(true);
}

使用上面的代码，我得到的是：

从我所做的研究来看，这似乎是一个与应该返回 Observable (Type 'void' is not assignable to type 'ObservableInput<{}>') 这一事实有关的问题。但就我而言，我不确定是什么问题。

我正在合作：

Angular 4.0.1
TypeScript 2.2.2
RxJS 5.2.0

【问题讨论】：

你要回Observable有什么问题？
直到现在我不确定我需要返回什么......我相信所有代码都会在Subject被触发时起作用，所以我不明白在哪里我应该返回Observable
.switchMap(data => { return Observable.of(null) }) 别忘了import 'rxjs/add/observable/of'; 但它只是存根。我假设您想获得真正的可观察性
嗯，我觉得有点愚蠢...一直在尝试类似的东西..一定忽略了一些东西-_-非常感谢！我想我会设法让它工作 - 可能需要几杯咖啡..再次感谢！
我想知道使用.switchMap(data => { return Observable.of(null) }) 有什么意义。看起来您根本不需要使用 switchMap。

标签： angular typescript rxjs rxjs5

【解决方案1】：

默认情况下，箭头函数() => {...} 的返回类型为void，除非你返回一些东西。

如果你想使用switchMap什么都不返回，你可以按照yurzui在cmets中说的，return Observable.empty()。

话虽如此，如果你在switchMap 中返回一个null 的observable，这意味着你不需要switchMap 并且你可以直接使用do 操作符，它在不修改返回数据的情况下执行操作。或者mergeMap，它允许您从从原始数据中获得的数据中返回一个新的 Observable。

【讨论】：

你可能想要Observable.empty()而不是Observable.of(null)

【解决方案2】：

我正在与：

Angular 5.1.0
TypeScript 2.5.3
RxJS 5.5.6

我遇到了同样的问题。我修复了将返回值放入 switchMap 的问题，因为您无法返回 undefined 或 null 值。但是如果你不能返回一个 Observable，你可以返回一个空数组。

我必须解决一个 Observable 链接，我以这种方式解决了：

resolve(): Observable<any> {
    return firstObservableFunc()
    .map(res => res)
    .switchMap(result => (result && result.value === 'OK') ? secondObservableFunc() : []);                        
}

【讨论】：