Angular中如何获取pipe输出结果供其他元素使用并判断数组长度显示无数据提示

核心解决方案 #

通过模板变量捕获管道过滤后的结果，直接基于该结果判断是否为空，即可解决拿不到过滤后数组长度的问题：

模板代码修改示例 #

• 首先将管道过滤后的结果赋值为临时模板变量，避免重复执行管道：

<!-- 先执行过滤，将结果存为filteredProducts变量 -->
<ng-container *ngIf="(allProducts | searchFilter: searchKeyword) as filteredProducts">
  <!-- 渲染产品列表 -->
  <div class="product-item" *ngFor="let product of filteredProducts">
    <!-- 原有产品内容渲染逻辑 -->
  </div>

  <!-- 直接判断过滤后数组的长度显示提示 -->
  <div *ngIf="filteredProducts.length === 0">
    No items to display
  </div>
</ng-container>

原有代码问题说明 #

你之前的判断逻辑*ngIf="!__allprdts"是针对原始全量产品数组的，只要原始数组不为空，该条件永远不触发，所以无数据提示不会显示。

性能优化注意事项 #

• 不要在模板中多次调用同一个过滤管道，通过as语法捕获过滤结果后，整个模板内都可以复用该结果，仅执行一次管道逻辑
• 如果使用的是不纯管道（声明时设置了pure: false），建议搭配手动变更检测控制，避免多余的过滤计算

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