angular - Angular 8で同じイベントで以前の発行を中断する方法

Question

ユーザーがテーブル内の行を選択するたびにデータグリッド テーブルを更新するアプリがあります。ここで簡単にするために、サンプルコードがあります：

child-component.ts

public jsonData = {...} //api request

this.rowSelectedEvent.subscribe(() => {
  this.refreshData(this.jsonData) 
})

function refreshData(jsonData){
  this.httpService.post(`${environment.BASE_URL}/api`, jsonData.payload).subscribe(
    result => {
      this.resultData = result.data
    }, 
    err => {
      console.error(err)
    }
  )
}

ユーザーがテーブルのrowSelectedEvent行をクリックすると、HTML でトリガーされます。これは例です：

app.component.html

<table>
  <row (click)="notifyRowSelected"></row>
</table>

app.component.ts

@Output() rowSelectedEvent: EventEmitter<string> = new EventEmitter();

[...]

function notifyRowSelected(){
  this.rowSelectedEvent.emit()
}

このコードは正常に動作し、新しいデータを含む API 応答を受け取ります。サーバー側が計算を行い、新しい値を返すまでに約 4 ～ 5 秒かかります。この問題は、ユーザーが数行を繰り返しクリックしたり、短時間でクリックしたりすると発生します。これは、アプリが異常になり、データが 1 回 (最後の 1 回) ではなく複数回更新されるためです。使用してみunsubscribe()ましたが、再度サブスクライブできないため、機能が失われます。私も試してみましswitchMap()たが、何らかの理由でコードをデバッグすると、コードが入りません。

アイデアは、ユーザーが新しい行をクリックしたときに保留中のプロセスを停止し、最後のクリックだけが計算を行い、応答を受け取るようにすることです。何かアドバイス？