如何重置数据源为Observable的表格，解决二次搜索空值残留旧数据问题

你遇到的旧数据残留问题，是两类场景导致的：

• 第二次搜索时，getCustomer返回了空Observable（无next值直接完成），此时switchMap不会向下游发射任何新值，async管道绑定的还是上一次搜索的有效数据，表格不会更新
• 你当前的catchError返回空对象{}，空对象属于truthy值，*ngIf判断仍为真，表格不会销毁，极端场景下会残留旧渲染内容

1. 修改业务逻辑代码 #

新增空Observable处理逻辑，同时把错误返回值改为null：

import { defaultIfEmpty } from 'rxjs';

public borrowers_main_data$ = this.service.cdiVariable$.pipe(
switchMap(cdiVariable => {return this.dataSource.getCustomer(cdiVariable).pipe(
  // 空Observable自动补一个null值，强制触发视图更新
  defaultIfEmpty(null),
  catchError(error => {
    if (error.error instanceof ErrorEvent) {
      this.errorMsg = `Error: ${error.error.message}`;
    } else {
      this.errorMsg = `Error: ${error.message}`;
    }
    // 错误场景返回null而非空对象
    return of(null);
  }))
}));

2. 可选优化模板判断 #

如果需要避免后端返回无效空对象的场景，可以给*ngIf补充有效数据判断，只有返回对象存在Cdi字段时才渲染表格：

<table class="table table-borderless" style="width:44%;" *ngIf="(borrowers_main_data$ | async) as borrowers_main_data && borrowers_main_data?.Cdi">
        <tbody>
          <tr>
            <td width="8%">CDI:</td>
            <td>
              <strong>{{ borrowers_main_data.Cdi }}</strong>
            </td>
          </tr>
        </tbody>
</table>
<!-- 可补充无数据提示 -->
<p *ngIf="(borrowers_main_data$ | async) === null">
  {{ errorMsg || '暂无对应客户数据' }}
</p>

• defaultIfEmpty(null)会拦截所有无返回值的搜索请求，主动向下游发射null，强制async管道更新绑定值
• 空值/错误场景统一返回null，null为falsy值，*ngIf判断为假时会销毁表格DOM，自然清除旧数据
• 补充有效字段判断后，可过滤掉无业务意义的空对象，避免无效内容渲染

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