Angular：当无显示项时如何展示提示信息？

这个场景我之前也碰到过——虽然users数组还有3个元素，但全是标记为已删除的，原代码只会跳过这些条目，不会显示“条目不存在”的提示。下面给你几个实用的解决思路：

方案一：直接在模板中判断所有用户是否已删除 #

你可以先把异步的users数据解析成本地变量，然后用数组的every()方法检查是否所有用户都被标记为deleted：

<ng-container *ngIf="users | async as userList">
  <!-- 展示未删除的用户 -->
  <ng-container *ngFor="let user of userList; let i = index">
    <div *ngIf="!user.deleted">
      {{user.name}} {{i}}
    </div>
  </ng-container>

  <!-- 当所有用户都已删除时显示提示 -->
  <div *ngIf="userList.every(user => user.deleted)">
    条目不存在
  </div>
</ng-container>

这个方法的好处是不用额外写组件逻辑或管道，适合小数据量的场景。

方案二：自定义过滤管道（推荐） #

把“过滤未删除用户”的逻辑抽成自定义管道，这样不仅模板更简洁，还能直接通过过滤后的列表长度判断是否显示提示：

第一步：创建过滤管道 #

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'filterNonDeleted' })
export class FilterNonDeletedPipe implements PipeTransform {
  transform(users: any[]): any[] {
    // 处理空数组的情况，避免报错
    return users ? users.filter(user => !user.deleted) : [];
  }
}

记得在你的模块中声明这个管道哦。

第二步：在模板中使用 #

<ng-container *ngIf="(users | async | filterNonDeleted) as activeUsers">
  <!-- 直接遍历过滤后的有效用户 -->
  <div *ngFor="let user of activeUsers; let i = index">
    {{user.name}} {{i}}
  </div>

  <!-- 过滤后列表为空时显示提示 -->
  <div *ngIf="activeUsers.length === 0">
    条目不存在
  </div>
</ng-container>

这个方案的优势在于逻辑复用性强，以后其他地方需要过滤未删除用户时，直接用这个管道就行。

方案三：在组件中处理过滤逻辑 #

如果你的过滤逻辑比较复杂，或者不想用管道，也可以在组件内通过Observable的map操作符提前处理：

组件代码 #

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

// 假设你的users是Observable类型
users: Observable<any[]>;
activeUsers$: Observable<any[]>;

ngOnInit(): void {
  this.activeUsers$ = this.users.pipe(
    map(users => users.filter(user => !user.deleted))
  );
}

模板代码 #

<ng-container *ngIf="activeUsers$ | async as activeUsers">
  <div *ngFor="let user of activeUsers; let i = index">
    {{user.name}} {{i}}
  </div>

  <div *ngIf="activeUsers.length === 0">
    条目不存在
  </div>
</ng-container>

这种方式把业务逻辑放在组件里，模板更干净，也方便后续维护复杂的过滤规则。

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