Angular框架下如何实现空表格无数据时自动隐藏功能？

你的需求在Angular中可以通过调整条件渲染逻辑轻松实现，具体修改方案如下：

1. 调整第一个单条数据表格的隐藏逻辑 #

你目前只给第一个表格的数据行加了*ngIf="statusLine.open != 0"的判断，所以无数据时会残留表头。只需要把判断条件加到整个表格的外层容器上，就能让表头和数据行同时隐藏：

<!-- 给第一个table的外层table-responsive div添加ngIf判断 -->
<div class="table-responsive" *ngIf="statusLine.open != 0">
  <table class="table table-striped">
    <!-- 原有表头、数据行代码保持不变 -->
    <tr style="background-color: #f8f9fa;">
      <td style="width: 13%;">Opening</td>
      <td style="width: 13%;">Highest</td>
      <!-- 其余表头列代码省略 -->
    </tr>
    <tr *ngIf="statusLine.open != 0">
      <!-- 原有数据行代码保持不变 -->
    </tr>
  </table>
</div>

小提示：如果statusLine可能出现未赋值的情况，可以把判断条件改为statusLine?.open != 0，使用可选链避免运行时报错。

2. 调整第二个数组渲染表格的隐藏逻辑 #

你目前只判断了statusLinesII数组长度大于0，但存在数组有值但所有行都不满足canShowLine()条件的情况，这时候也会残留表头。需要先在组件的ts文件中新增一个计算属性，判断是否有有效可展示行：

// 在对应的组件类中添加该计算属性
get hasValidStatusLinesII(): boolean {
  // 先判断数组存在且不为空，再判断至少有一行符合展示条件
  return this.statusLinesII?.length > 0 && this.statusLinesII.some(line => this.canShowLine(line));
}

然后把包裹第二个表格的ng-container的判断条件替换为上面的计算属性即可：

<!-- 把原有判断条件替换为hasValidStatusLinesII -->
<ng-container *ngIf="hasValidStatusLinesII">
  <div class="table-responsive">
    <table class="table table-striped">
      <!-- 原有表头、循环渲染代码保持不变 -->
    </table>
  </div>
</ng-container>

以上修改完成后，两个表格没有可展示数据时就会完全隐藏，符合你预期的效果。

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