Angular Async Pipe加载过滤数据提示消息异常问题排查

问题根源分析 #

1. 初始状态错误：response默认是空数组，loading初始为false，导致!response.length && !loading一开始就成立，所以“No items found”始终显示。
2. Loading状态未正确触发：初始加载数据时没有设置loading=true，且手动订阅Observable导致状态更新时机混乱。
3. 重复订阅Observable：Async Pipe已经会自动订阅characters，你又手动额外订阅了一次，既浪费资源，还会造成数据状态不同步。

修复方案 #

第一步：重构TypeScript代码，统一数据流与状态管理 #

移除冗余的response变量，通过Observable派生状态，统一控制loading状态：

public characters$: Observable<DifferentCharacter[]>;
public loading: boolean = false;
public isEmpty$: Observable<boolean>;

public gettingAndInputCharacters(): void {
  const inputSearchItem = localStorage.getItem('inputCharacterValue') || '';

  const filterCharacters = (value: string) => {
    this.loading = true;
    return this.charactersService.getAllCharacters(value).pipe(
      map((response) => {
        const characters = response.results.sort((a, b) => {
          return a.name.localeCompare(b.name);
        });
        return value ? characters.filter((character: DifferentCharacter) => {
          const name = character.name.trim().toLowerCase();
          const searchInputItem = value.trim().toLowerCase();
          return name.startsWith(searchInputItem) ||
            searchInputItem.split('').every((char: string, index: number) => char === name.charAt(index));
        }) : characters;
      }),
      catchError(() => of([])),
      finalize(() => this.loading = false)
    );
  };

  this.form.controls['searchCharacterInput'].setValue(inputSearchItem);

  // 处理搜索输入变化与初始加载
  this.characters$ = this.form.controls['searchCharacterInput'].valueChanges.pipe(
    tap(value => localStorage.setItem('inputCharacterValue', value)),
    switchMap(value => filterCharacters(value)),
    startWith(filterCharacters(inputSearchItem))
  );

  // 派生空状态Observable，确保与数据流同步
  this.isEmpty$ = this.characters$.pipe(
    map(characters => characters.length === 0),
    distinctUntilChanged()
  );
}

第二步：更新HTML模板，使用同步的状态判断 #

移除基于response的判断，改用派生的isEmpty$结合loading状态：

<!-- 角色列表 -->
<div *ngFor="let character of (characters$ | async)">
  {{ character.name }}
</div>

<!-- 加载提示：仅在loading为true时显示 -->
<div *ngIf="loading">
  Loading...
</div>

<!-- 无结果提示：加载完成且结果为空时显示 -->
<div *ngIf="(isEmpty$ | async) && !loading">
  No items found
</div>

关键修复点说明 #

• 移除重复订阅：依靠Async Pipe自动管理订阅，避免手动订阅导致的状态不一致和资源浪费。
• 统一Loading控制：在filterCharacters中设置loading=true，通过finalize确保请求完成（无论成功失败）后重置loading，覆盖初始加载和搜索所有场景。
• 派生空状态：从characters$直接派生isEmpty$，无需维护额外变量，保证状态与数据流完全同步。
• 初始加载处理：用startWith在输入变化流中加入初始请求，确保页面初始化时也会触发加载流程，正确显示Loading状态。

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