在管道中的switchMap运算符之后使用的Rxjs map运算符找不到lift（）函数

Question

场景 - 页面需要从外部源异步加载数据，并根据isLoading属性显示加载图像。 使用EventEmitter手动触发数据刷新按钮，但在演示中只订阅检索数据（为简单起见）。 Pipe用于检索数据并将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

问题出在括号中。你有：

@SpringBootApplication(scanBasePackages = {"com.example.demo", "controller"}) // Add this
public class DemoApplication {
    // ...
}

但是这样您就可以将switchMap(() => { // retrieve observable from http service example return observableOf({}); }, map(data => { this.isLoading = false; return data; }) 作为第二个参数传递给map。

您可能希望改为：

switchMap

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

如果你只是想要执行一些副作用并且不想修改数据，那么你可以使用switchMap(() => { // retrieve observable from http service example return observableOf({}); }), map(data => { this.isLoading = false; return data; }) 代替tap：

map