如果它有api中的数据，则如何显示表，否则会显示其他div。

Question

在我的六角形应用程序中。我有一个表显示来自web的数据，还有一些ngIf容器。如果web数据为空，就会显示一条消息。如果有数据返回，另一个应该显示表。我的当前代码不起作用：

.ts文件

  public errorApi = false;
  public tableShow = false;

ngOnInit() {
    this.service.getIncidents(this.customer_id).subscribe((data) => {
      this.loading = true;
      this.data = data.result;
      this.loading = false;
      console.log('Result - ', data);
      console.log('data is received');

      this.errorApi = data.result == null || data.result === 0 || data.result.length === 0;
      this.tableShow = this.data && this.data.result;
      }) 
    }
}

html

<ng-container *ngIf="errorApi">
        <div class="column col-12 text-center pt-10 pb-10">
        <div class="empty">
            <div class="empty-icon">
              <i class="icon icon-people"></i>
            </div>
            <p class="empty-title h5">There are no incidents to display</p>
            <div class="empty-action">
              <button class="btn btn-primary">Create an incident</button>
            </div>
          </div>
          </div>
      </ng-container>

<ng-container *ngIf="tableshow">
       <table></table>
      </ng-container>

Answer 1

直接使用数据变量检查它是否有数据。

这将检查data数组中是否有数据。如果有，它将显示表，但是如果它是空数组或空数组，那么它将显示错误。

首先在ts中定义数据变量：data = [];

<div *ngIf="!data.length > 0">
    <div class="column col-12 text-center pt-10 pb-10">
        <div class="empty">
            <div class="empty-icon">
                <i class="icon icon-people"></i>
            </div>
            <p class="empty-title h5">There are no incidents to display</p>
            <div class="empty-action">
              <button class="btn btn-primary">Create an incident</button>
            </div>
       </div>
  </div>
</div>

<div *ngIf="data.length > 0">
   <p>Table Data here</p>
</div>

Answer 2

在ngIf语句中尝试else

<ng-container *ngIf="errorApi else apiTable">
        <div class="column col-12 text-center pt-10 pb-10">
        <div class="empty">
            <div class="empty-icon">
              <i class="icon icon-people"></i>
            </div>
            <p class="empty-title h5">There are no incidents to display</p>
            <div class="empty-action">
              <button class="btn btn-primary">Create an incident</button>
            </div>
          </div>
          </div>
      </ng-container>

<ng-container #apiTable>
       <table></table>
      </ng-container>

Answer 3

尝试else从*ngIf指令：

*ngIf="errorApi; else apiTable"