时间戳

首页 > 解决方案 > 当用户单击按钮时刷新 Observable 数据

angular - 当用户单击按钮时刷新 Observable 数据

问题描述

我有一个 Angular 6 组件，其中有一个网格，它使用异步管道订阅带有项目的可观察对象。我想要一个按钮，单击该按钮会刷新该可观察对象中的数据。我添加了以下代码：

public refreshData(): void {
   this.details$ = this._service.getDetails();
}

然后，在模板上：

*ngIf="(details$ | async); let d"

所以现在，每次用户单击按钮时，都会执行 refreshData 方法。该代码有效，数据已刷新，但我正在为每次点击创建一个新的 observable。有没有更好的方法来处理它？

标签： angularrxjs

解决方案

正如所评论的那样，一种更具反应性的方法如下：

import {Subject,Observable} from 'rxjs';
import {startWith,switchMap} from 'rxjs/operators';

class FooComponent implements OnDestroy {
  private readonly refreshClick$ = new Subject<void>();
  readonly details$ : Observable<FooDetails>;

  constructor(...){
    this.details$ = this.refreshClick$.pipe(
     // fake emission of a click so that initial data can be loaded
     startWith(undefined),
     switchMap(() => this._service.getDetails())
    );
  }

  ngOnDestroy(){
    // "complete" should be invoked on subjects once their lifetime is complete
    refreshClick$.complete();
  }

  refresh(){
    this.refreshClick$.next();
  }
}

推荐阅读