一旦 Rx.Observable 发生错误，ValueChanges 就会停止工作

Question

我正在关注 Angular 2 应用程序中的一些 Rx.Observable 教程并使用 AutoComplete 风格的系统。

当我在一个字段中输入时，valueChanges 事件从 Angular 2 FormControl 触发。

这被链接到 Observable，后者正在对 JSON 端点发出 HTTP 请求。

当端点返回 404 状态时，valueChanges 事件停止工作。

我可以在我的 subscribe 方法中看到错误，但不确定什么是最好的技术来恢复并继续前进。

我也有点困惑为什么 KeyUp 或 ValueChange 事件会停止触发。

样本值变化 - 可观察链

this.userNameControl
    .valueChanges
    .do(r => {
            // As soon as a 404 status is thrown from getGitHuybUser$, all value change (keyup) events stop working
            console.log
        }
    )
    .switchMap(userName => {
        return this.getGitHubUser$(userName);
    })
    .catch(err => {
        return Observable.of(err)
    })
    .subscribe(v => {
            console.log(v);
        },
        (err) => {
            // As soon ass there is a 404 status, I end up here
            console.log(err);
        },
        () => {
            console.log('Complete');
        });

getGitHubUser$(username) {
    return this.http
        .get(`https://api.github.com/users/${username}`)
}

HTML 表单控件

<input type="text" [value]="userName" [formControl]="userNameControl" />

我尝试在捕获中返回 Observable.empty() 和 Observable.never()

.catch(err => {
    // Observable.of(err)
    // return Observable.empty();
    return Observable.never();
})

结果是该subscribe方法调用了我的complete方法并且仍然如此，因此 valueChanges 仍然不会触发。

Answer 1

想通了我的问题，.catch()我挂了.switchMap()真正需要挂的this.getGitHubUser$(userName)

this.userNameControl
    .valueChanges
    .do(r => {
            // As soon as a 404 status is thrown from getGitHuybUser$, all value change (keyup) events stop working
            console.log(r);
        }
    )
    .switchMap(userName => {
        console.log('GET GIT HUB USER');

        return this.getGitHubUser$(userName)
            .catch(err => {
                console.log('CATCH INNER');
                console.log(err);
                return Observable.of(err)
            })
    })
    // .catch(err => {
    //     // THIS CODE IS NOT NEEDED
    //     console.log('CATCH');
    //     console.log(err);
    //     return Observable.never(); // Observable.of(err)
    // })
    .subscribe(v => {
            console.log('SUCCESS');
            console.log(v);
        },
        (err) => {
            console.log('ERROR');
            console.log(err);
        },
        () => {
            console.log('COMPLETE');
        });