如何修复ng-template在实际结果出现前提前显示的问题

我写了一段基于关键词搜索的Angular代码，现在遇到一个问题：在搜索结果返回前，ng-template里的“Not Found”会短暂显示，影响用户体验。fakeRequest只是模拟API调用，本身没有问题，问题出在ng-template的显示逻辑上。想请教能不能在不引入额外变量的前提下修复这个问题？

HTML代码 #

<input type="input" #term>  

<div *ngIf="term.value.length">
<div *ngIf="data?.length !== 0; else no_data">
  <div *ngFor="let item of data">
    <span>{{ item }}</span>
  </div>
 </div>
 <ng-template #no_data>Not Found</ng-template>
</div>

组件代码 #

fromEvent(this.term.nativeElement, 'keyup')
  .pipe(
    map((event: any) => event.target.value),
    switchMap((term) => {
      return this.fakeRequest(term);
    })
  )
  .subscribe((data) => {
    this.data = data;
  });

复现步骤 #

• 搜索关键词'bla'
• 删除'bla'
• 输入'al'或'alpha'

修复方案 #

核心问题是当前逻辑把「请求未返回（data为undefined）」和「请求返回空数据」两种状态混为一谈，导致请求过程中误显示“Not Found”。以下是两种无需额外变量的修复方式：

方式一：直接修改模板判断逻辑

调整*ngIf的条件，只有当data已被赋值且长度为0时，才显示“Not Found”：

<input type="input" #term>  

<div *ngIf="term.value.length">
  <div *ngIf="data !== undefined && data?.length !== 0; else no_data">
    <div *ngFor="let item of data">
      <span>{{ item }}</span>
    </div>
  </div>
  <ng-template #no_data>
    <!-- 仅当data存在（请求完成）且为空时显示 -->
    <span *ngIf="data !== undefined">Not Found</span>
  </ng-template>
</div>

原理：请求进行中data保持undefined，此时no_data模板里的内容不会渲染；只有请求完成且返回空数组时，才会显示“Not Found”。

方式二：利用async管道简化逻辑

把组件中的Observable直接暴露给模板，用async管道自动管理订阅，同时天然区分请求状态：

1. 修改组件代码：

// 把订阅改为直接暴露Observable
searchResults$ = fromEvent(this.term.nativeElement, 'keyup')
  .pipe(
    map((event: any) => event.target.value),
    switchMap((term) => this.fakeRequest(term))
  );

2. 修改HTML模板：

<input type="input" #term>  

<div *ngIf="term.value.length">
  <!-- async管道在请求未完成时不会赋值data -->
  <div *ngIf="searchResults$ | async as data; else loading">
    <div *ngIf="data.length !== 0; else no_data">
      <div *ngFor="let item of data">
        <span>{{ item }}</span>
      </div>
    </div>
    <ng-template #no_data>Not Found</ng-template>
  </div>
  <!-- 请求中显示空白，也可替换为加载提示 -->
  <ng-template #loading></ng-template>
</div>

这种方式更符合Angular的最佳实践，既不需要额外变量，也能清晰区分加载中、无数据、有数据三种状态。

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