Angular中如何在列表无数据时展示提示消息

你可以直接用Angular自带的 *ngIf else 分支语法实现需求，无需额外引入第三方依赖，调整步骤如下：

第一步：修改component.html模板代码 #

替换原有列表区域的逻辑，新增空状态占位模板：

<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="data?.length > 0; else emptyTpl" [changeObjects]="data"></app-list>
  <!-- 空状态模板 -->
  <ng-template #emptyTpl>
    <div class="empty-notice">列表为空</div>
  </ng-template>
</div>

这里用到的 ?. 是Angular支持的可选链运算符，即便data为null/undefined也不会抛出语法错误，自动判定为条件不成立，展示空状态。

第二步：简化component.ts逻辑 #

因为模板已经内置了数据非空判断，你可以删掉原来冗余的visible变量维护逻辑，调整后代码如下：

this.data = this.objects;
this.showButton = true;

如果你希望继续保留visible变量做统一状态管理，也可以不修改TS代码，只需要把模板里的判断条件替换成visible即可：

<app-list *ngIf="visible; else emptyTpl" [changeObjects]="data"></app-list>

可选优化 #

你可以给.empty-notice增加自定义样式，比如设置居中、浅灰色字体、上下边距等，提升空状态的展示效果。

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