Angular输入框清空时如何加载全部账户数据？

数据老陈

2026-7-27

解决方案

要实现清空输入框后显示所有记录，需要调整前端组件的事件处理逻辑，并确保后端接口支持对应参数规则，具体修改如下：

1. 修改组件的`onInputChange`方法

当前方法仅在输入框有内容时触发接口请求，清空输入框时无动作。修改为无论输入框是否有内容，都调用接口并传入处理后的账号值：

onInputChange(): void {
  const trimmedAccount = this.account?.trim() || '';
  this.OverviewTransfers(trimmedAccount);
}

2. 调整`onSubmit`方法（可选）

原方法在提交空账号时弹出必填提示，若希望主动提交空值时也显示所有记录，可修改逻辑：

onSubmit(): void {
  const trimmedAccount = this.account?.trim() || '';
  this.OverviewTransfers(trimmedAccount);
}

如果需要保留“主动提交空值时提示必填”的逻辑，仅修改onInputChange即可（输入过程中清空输入框仍会触发全量数据加载）。

3. 适配后端接口请求（关键）

需要确保后端能识别空账号参数并返回全量数据。修改服务层代码，当账号为空时，不在请求体中携带DEPO字段（或传空字符串，具体取决于后端接口约定）：

overviewTransfers(account: string): Observable<ApiResponse> {
  const requestBody: { AGENCE: string; DEPO?: string } = {
    AGENCE: this.store.selectSnapshot(AgencyState.currentAgency).CODE
  };
  // 仅当账号非空时添加DEPO参数
  if (account.trim()) {
    requestBody.DEPO = account.trim();
  }
  return this.http.post<ApiResponse>(this.api + `/AGHRAF`, requestBody);
}