根据 ngIf 显示文本或 table

Question

我有一个 table，它是根据 API 呼叫响应 (job_list) 填充的。如果没有返回数据，我想显示一个文本说“没有数据”。我做了以下事情：

HTML

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

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

Answer 1

您可以查看。

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

Answer 2

您可以通过单独的模板执行此操作，它只需要一个 *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>

Answer 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

上亲自尝试

根据 ngIf 显示文本或 table

Display text or table based on ngIf

angular

angular-ng-if

HTML