如何在无数据展示时隐藏表格和changeState按钮

问题根因 #

1. 空判断逻辑覆盖不全：现有判断仅能识别objects为null/undefined的场景，空数组[]属于真值，![]返回false，因此空数组场景下不会进入你写的if分支，showButton会保持初始值true，导致按钮一直显示。
2. 模板判断逻辑不一致：无数据提示的判断条件为*ngIf="!data"，空数组同样不满足该条件，因此空数组场景下提示会消失。
3. 若你的objects是异步接口返回的数据，初始化时objects为null会短暂触发提示，接口返回空数组后触发上述逻辑漏洞，就会出现提示闪一下后按钮、表格重新显示的问题。

修复方案 #

1. 修正TS逻辑

统一用是否为有效非空数组作为判断标准，按钮显示状态和列表数据状态直接绑定：

// 统一判断是否存在有效数据
const hasValidData = Array.isArray(this.objects) && this.objects.length > 0;
this.data = this.objects;
this.visible = hasValidData;
this.showButton = hasValidData;

如果objects是异步获取的，需要在接口返回后重新执行上述逻辑更新状态：

// 示例：接口请求回调中更新状态
yourApiRequest().subscribe(res => {
  this.objects = res;
  const hasValidData = Array.isArray(this.objects) && this.objects.length > 0;
  this.data = this.objects;
  this.visible = hasValidData;
  this.showButton = hasValidData;
})

2. 对齐模板判断逻辑

将无数据提示的判断条件和TS逻辑对齐，避免判断标准不一致：

<app-header [isHidden]="isHiddenProgressBar"></app-header>
<div class="change">
  <button (click)="changeState()" *ngIf="showButton" color="primary" mat-raised-button>Change state</button>
</div>
<div class="list">
  <app-list *ngIf="visible" [changeObjects]="data"></app-list>
  <ng-container *ngIf="!visible">
    No entries in the list!
  </ng-container>
</div>

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