角度 - 在 rxjs 订阅等待数据时显示加载

Question

我的 onInit 中有一个简单的订阅：

ngOnInit(): void {
    this.subscription = timer(0, 5000).pipe(
        switchMap(() => this.monitoringService.getHeartbeats())
      ).subscribe(data => this.heartbeats = data.data);
}

但我想显示一个简单的加载栏，同时订阅从服务器获取数据。有没有办法在开始时将this.loading 之类的变量设置为true，在获取数据时设置false？

为了完整起见，这是我得到的心跳示例：

....
  {
    _id: 5e58595325c28e4470c90d45,
    customer: 5cab35ae9a39025a6b8cef7e,
    activeUsers: 11,
    usersLoggedIn: 7,
    terminals: [ [Object], [Object] ],
    heartbeatDate: 2020-02-28T00:05:39.277Z,
    __v: 0
  },
  {
    _id: 5e58593a25c28e4470c90d42,
    customer: 5cab35ae9a39025a6b8cef7e,
    activeUsers: 11,
    usersLoggedIn: 7,
    terminals: [ [Object], [Object] ],
    heartbeatDate: 2020-02-28T00:05:14.311Z,
    __v: 0
  },
  {
    _id: 5e5858aac78f000c70ac2468,
    customer: 5cab35ae9a39025a6b8cef7e,
    activeUsers: 11,
    usersLoggedIn: 7,
    terminals: [ [Object], [Object] ],
    heartbeatDate: 2020-02-28T00:02:50.575Z,
    __v: 0
  },
  {
    _id: 5e5858348b2d6d3d0c1d482e,
    customer: 5cab35ae9a39025a6b8cef7e,
    activeUsers: 11,
    usersLoggedIn: 7,
    terminals: [ [Object], [Object] ],
    heartbeatDate: 2020-02-28T00:00:52.306Z,
    __v: 0
  } 
....

Answer 1

试试：

ngOnInit(): void {
    this.subscription = timer(0, 5000).pipe(
        tap(() => this.loading = true),
        switchMap(() => this.monitoringService.getHeartbeats())
      ).subscribe(data => { 
                           this.heartbeats = data.data; 
                           this.loading = false;
       }, err => this.loading = false ); // handle error how you want, just turn loading off as well
}