Angular

switchMap オペレーターを使って、ボタンクリックに応じて Observable データを取得する

2020年5月23日

Angular でボタンクリックなど、任意のユーザー操作のタイミングで Observable にデータを取得し、UI に最新情報を表示したいことがあります。こんな時には、Subject と switchMap オペレーターを組み合わせて使うと簡潔に実装することができます。

HTML テンプレートの実装

HTML テンプレートでは、Observable を async パイプでバインドしておきます。

<button (click)="onGetData()">データ取得</button>
<button (click)="onClearList()">クリア</button>

<!-- Observable をバインドするリスト -->
<div *ngFor="let product of products$ | async">
  <div class="product">{{ product.name }}</div>
</div>

コンポーネントの実装

コンポーネントでは、ユーザー操作が発生したタイミングで Subject の next メソッドを呼び出して、データストリームの最新の状態を Observable に設定し直します。

  clickStream = new Subject();
  products$: Observable<any>;

  ... 省略 ...

  ngOnInit() {
    // products$ はデータを受け取る Observable
    this.products$ = this.clickStream.pipe(
      switchMap(() => this.http.get('/api/products/'))
    );
  }

  onGetData() {
    // 最新のデータを取得
    this.clickStream.next();
  }

-Angular