在管道中的 switchMap 运算符之后使用的 Rxjs 映射运算符找不到提升（）函数

Question

场景 - 页面需要从外部源异步加载数据并根据 isLoading 属性显示加载图像。 使用 EventEmitter 通过按钮手动触发数据刷新，但在演示中只是订阅检索数据（为简单起见）。 管道用于检索数据并将 isLoading 设置为 false 或 true。

import { Component, EventEmitter } from '@angular/core';

import { Observable } from 'rxjs/Observable';
import { merge } from 'rxjs/observable/merge';
import { switchMap } from 'rxjs/operators/switchMap';
import { startWith } from 'rxjs/operators/startWith';
import { delay } from 'rxjs/operators/delay';
import { tap } from 'rxjs/operators/tap';
import { map } from 'rxjs/operators/map';
import { of as observableOf } from 'rxjs/observable/of';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  tableRefreshEmitter = new EventEmitter<any>(true);
  isLoading = false;
  data: Observable<{}>;

  constructor() {
    this.data = merge(this.tableRefreshEmitter)
    .pipe(
      startWith({}),
      tap(() => {
        this.isLoading = true;
      }),
      switchMap(() => {
        // retrieve observable from http service example
        return observableOf({});
      },
      map(data => {
        this.isLoading = false;
        return data;
      })      
    ));

    this.data.subscribe(d => console.log(d));
  }
}

代码产生错误：

目前一直在寻找罪魁祸首，如果能就如何解决错误，我们将不胜感激。

stackblitz 上的工作示例

Answer 1

问题在括号中。你有：

switchMap(() => {
    // retrieve observable from http service example
    return observableOf({});
},
map(data => {
    this.isLoading = false;
    return data;
})

但是这样你将map 作为第二个参数传递给switchMap。

你可能想要这个来代替：

switchMap(() => {
    // retrieve observable from http service example
    return observableOf({});
}),
map(data => {
    this.isLoading = false;
    return data;
})   

您更新后的演示打印“已加载”：https://stackblitz.com/edit/angular-rxjs-lift-missing-ypue7b?file=app/app.component.ts

顺便说一句，如果您只想执行一些副作用并且不想修改数据，您可以使用tap 而不是map：

tap(() => this.isLoading = false)