如何通过点击按钮实现服务器数据加载的切换控制？

看起来你想要实现的是：点击按钮时，只有在版本列表未显示（showVersions为false）的情况下才发起服务器请求获取历史数据，同时切换状态显示列表；如果列表已经显示了，点击按钮就直接隐藏，不用重复发请求。你的现有代码不管当前状态如何，每次点击都会触发请求，这不符合预期，我来帮你修改一下：

修改后的TypeScript代码 #

import { of } from 'rxjs';
// 别忘了导入of操作符

fromEvent(this.historyBtn.nativeElement, 'click')
  .pipe(
    switchMap(() => {
      // 根据当前showVersions状态决定是否发起请求
      if (!this.showVersions) {
        // 未显示版本时，发起请求并携带数据和切换标记
        return fromPromise(this.mapLibrary.objectHistoryService.getHistory()).pipe(
          map(history => ({ history, needToggle: true }))
        );
      } else {
        // 已显示版本时，直接返回切换信号，不发请求
        return of({ history: null, needToggle: true });
      }
    })
  )
  .subscribe(({ history, needToggle }) => {
    this.loadingHistoryPlan$.next(false);
    if (needToggle) {
      this.showVersions = !this.showVersions;
    }
    // 只有请求到数据时才更新history变量
    if (history) {
      this.history = history;
    }
  });

逻辑说明 #

• 状态判断分支：在switchMap里直接判断当前showVersions的状态，区分两种点击场景：
  • 当showVersions为false时，才调用接口获取历史数据，同时把数据和状态切换标记一起传递到订阅回调。
  • 当showVersions为true时，用of()创建一个空数据的Observable，只触发状态切换，避免无效请求。
• 订阅回调优化：只在有有效历史数据时才更新this.history，同时统一处理状态切换逻辑，让代码更清晰。

额外的用户体验优化 #

你还可以根据showVersions的状态动态修改按钮文本，让用户一眼就知道当前点击会做什么：

<button #historyBtn>{{ showVersions ? 'Hide versions' : 'Show versions' }}</button>
<ng-container *ngIf="showVersions">
  <select>
    <option [value]="h.id" *ngFor="let h of history">
      {{ h.updatedate }}
    </option>
  </select>
</ng-container>

这样调整后，点击按钮的逻辑就完全符合你的需求了：第一次点击会请求数据并显示版本选择器，后续点击只会切换显示/隐藏状态，不会重复发起服务器请求。

内容的提问来源于stack exchange，提问作者user15950794