基于 ngIf 显示文本或表格答案

【问题标题】：Display text or table based on ngIf基于 ngIf 显示文本或表格
【发布时间】：2021-12-20 07:48:33
【问题描述】：

我有一个基于 API 调用响应 (job_list) 填充的表。如果没有返回数据，我想显示一个文本说“没有数据”。我做了以下事情：

HTML

<div [hidden]="!job_list.length">
<table>
.
.
.
.
.
</table>

我应该在哪里添加文本“无数据”？谢谢。

【问题讨论】：

标签： angular angular-ng-if

【解决方案1】：

您可以通过单独的模板执行此操作，它只需要一个*ngIf，包括一个else。 Read more about ngIf in the official docs.

<ng-container *ngIf="job_list.length; else noDataTemplate">
    <table>

    </table>
</ng-container>


<ng-template #noDataTemplate>
    <p>No data found</p>
</ng-template>

【讨论】：

【解决方案2】：

你可以检查一下。

 <div *ngIf="job_list.length > 0">
   // Show table
 </div>
 <div *ngIf="job_list.length === 0">No Data</div>

【讨论】：

【解决方案3】：

您可以使用 [ngSwitch] 来实现此目的。更多信息Angular Doc

<ng-container [ngSwitch]="job_list.length">
   <ng-container *ngSwitchCase="0">
      <p>No Data</p>
   </ng-container>

   <ng-container *ngSwitchDefault>
      <table>
    
      </table>
   </ng-container>
</ng-container>

在this Stackblitz自己试试

【讨论】：