Question

订阅我的Observable时遇到一点问题

我有一个组合Observable：

private selectedEntryId$ = new Subject<number>();
private entries$ = new Subject<MappingEntry[]>();

private selectedEntry$ = Observable.combineLatest(
    this.entries$,
    this.selectedEntryId$,
    (entries: MappingEntry[], id: number) => {
        return entries.find((entry: MappingEntry) => {
            return entry.id === id;
        });
    });

每当我的selectedEntry$有下一个值并以这种方式订阅结果时，我都会尝试进行API调用：

constructor(private checkService: CheckService) {
    this.subscribeLengthCalculator();
}

subscribeLengthCalculator() {
    this.subscriptions.add(
        this.selectedEntry$
            .switchMap((entry) => {
                return entry ? this.checkService.calculateLinesLength([entry.value]) : Observable.empty();
            }).subscribe(([calculation: CalculationObject]) => {
                    console.log(calculation);
                    this.calculation = calculation;
             })
    );
}

第一次selectedEntry$有下一个值时，console.log会向控制台提供正确的API结果，但在我的html calculation中有空值。当selectedEntry$具有第二个下一个值时，console.log会向控制台发送正确的API结果，但在html中显示mi之前的值。任何人都可以解释我这种行为并告诉我应该怎样做才能在html中显示当前数据？这是一种非常奇怪的行为。

Answer 1

引用learnrxjs“但请注意，您可能希望在每个请求都需要完成的情况下避免使用switchMap。

“switchMap与其他展平运算符之间的主要区别在于取消效果”，这就是为什么当selectedEntry$具有第二个下一个值时，它会显示您之前的值。源可观察（this.selectedEntry$）a;准备就绪，订阅仅对来自此行的Observable有效：

return entry ? this.checkService.calculateLinesLength([entry.value]) : Observable.empty()

所以，话虽如此，我建议你尝试concatMap而不是switchMap：

subscribeLengthCalculator() {
    this.subscriptions.add(
        this.selectedEntry$
            .concatMap((entry) => {
                return entry ? this.checkService.calculateLinesLength([entry.value]) : Observable.empty();
            }).subscribe(([calculation: CalculationObject]) => {
                    console.log(calculation);
                    this.calculation = calculation;
             })
    );
}

但事实上，我喜欢管道运营商，所以答案是：

import { concatMap } from 'rxjs/observable/concatMap';

subscribeLengthCalculator() {
        this.subscriptions.add(
            this.selectedEntry$
                .pipe(
                    concatMap((entry) => {
                        return entry ? this.checkService.calculateLinesLength([entry.value]) : Observable.empty();
                    })
                ).subscribe(([calculation: CalculationObject]) => {
                    console.log(calculation);
                    this.calculation = calculation;
                })
        );
    }

无法检测到第一个Observable更改/视图不会刷新

1 个答案: