Блог

В моем приложении Angular 6. У меня есть таблица, показывающая данные из веб-api, также у меня есть несколько ngIf контейнеров. Отображается сообщение, если данные веб-api пусты. Другой должен показывать таблицу, если в нее возвращаются данные. Мой текущий код не работает:

.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 amp;amp; 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>
  

Попробуйте else в инструкции ngIf

 <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>
  

Используйте переменную data напрямую, чтобы проверить, есть ли в ней данные или нет.

Это проверяет, есть ли у вас данные в data массиве. Если есть, то отобразится таблица, но если это пустой массив или null, то отобразится ошибка.

Определите свою переменную данных в 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>
  

Попробуйте else из *ngIf директивы:

 *ngIf="errorApi; else apiTable"
  

 public data: any;
public loading: boolean;

private subscription: Subscription;

ngOnInit() {
   this.loading = true;
   this.subscription = this.service.getIncidents(this.customer_id)
   .subscribe((data: any) => {
      this.loading = false;

      // Because you have no error logic in your service
      If (data.result //amp;amp; any other validation on the data: {}) {
          this.data = data.result;

          console.log('Result - ', data);
          console.log('data is received');
      } else {
        this.errorApi = true;
      } 
    });
}

ngOnDestroy(): void {
   this.subscription.unsubscribe();
}
  

И в вашем html вы можете использовать ng-template :

 <ng-template *ngIf="data amp;amp; !loading; else errorTemplate">...</ng-template>
<ng-template #errorTemplate>...</ng-template>
  

Очевидно, что это необходимо для вашей проверки данных: {} но это должно дать вам некоторые идеи.