如果 api 響應 Angular 中沒有數據，則顯示 div

Question

如果在 api 響應中沒有收到數據，它會顯示一個 div。 以下是最好的方法嗎？ 目前，如果我在搜索框中沒有任何內容的情況下使用 getAll() 方法單擊搜索按鈕，則會出現 Div。 但是，如果我單擊 div（關閉按鈕）並重試，div 不會出現？ 我必須循環 function 嗎？ 僅供參考，我也在使用 Bootstrap。

組件.ts

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../../../services/api.service';
import { FormGroup, FormControl } from '@angular/forms';
import { FormBuilder } from '@angular/forms';
import { faSearch } from '@fortawesome/free-solid-svg-icons';
import { faRedo } from '@fortawesome/free-solid-svg-icons';
import { faHeadphones} from '@fortawesome/free-solid-svg-icons';
import { faExternalLinkAlt} from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.scss']
})
export class ContentComponent {

  public data = [];
  public apiData: any;
  public loading = false;
  public noData = false;
  p: number = 1;
  faSearch = faSearch;
  faRedo = faRedo;
  faHeadphones = faHeadphones;
  faExternalLinkAlt = faExternalLinkAlt;
  searchQuery : string = "";

  constructor(private service: ApiService) { }

  getAll() {
    this.service.getAll(this.searchQuery).subscribe((results) => {
      this.loading = true;
      console.log('Data is received - Result - ', results);
      this.data = results.results;
      this.loading = false;

      if (this.data.length <= 0) {
        this.noData = true;
      } else if (this.data.length >= 1) {
        this.noData = false;
      } else {
        this.noData = true;
      }
    })
  }

  refresh(): void {
    window.location.reload();
  }  

  Search(){
   this.service.getAll(this.searchQuery).subscribe((results) => {
      this.loading = true;
      console.log('Data is received - Result - ', results);
      this.data = results.results;
      this.loading = false;
    })
  }
  ngOnInit() {

  }
}

html

<ng-container *ngIf="noData">
  <div class="container">
      <div class="alert alert-warning alert-dismissible fade show" role="alert">
          <strong>Holy guacamole!</strong> You should check in on some of those fields below.
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
  </div>
</ng-container>

Answer 1

試試這個它應該工作

  if (this.data.length != 0) {
    this.noData = true;
  } else if (this.data.length == 0) {
    this.noData = false;
  } else {
    this.noData = true;
  }
})

或者

   if (this.data.length > 0) {
    this.noData = true;
  } else if (this.data.length == 0) {
    this.noData = false;
  } else {
    this.noData = true;
  }
})

Answer 2

嘗試

<div *ngIf="noData">
  <div class="container">
      <div class="alert alert-warning alert-dismissible fade show" role="alert">
          <strong>Holy guacamole!</strong> You should check in on some of those fields below.
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
  </div>
</div>

或使用這種方式<ng-container *ngIf="noData$ | async as noData">

Answer 3

最后，我只是從按鈕中刪除了data-dismiss="alert"並添加了一個（單擊）function 到基於noData變量的關閉按鈕。

Html

 <button type="button" class="close" (click)="noData()" aria-label="Close">
     <span aria-hidden="true">&times;</span>
 </button>

組件.ts

noData() {
    this.noData = false;
}  

Answer 4

首先，我建議您從“容器”中獲取 ngIf，因為這可能會導致 Angular 出現問題......我使用數組的長度屬性來做到這一點！

<ng-container>
  <div class="container">
      <div *ngIf="data.length == 0" class="alert alert-warning alert-dismissible fade show" role="alert">
          <strong>Holy guacamole!</strong> You should check in on some of those fields below.
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
  </div>
</ng-container>

但請注意，為了正常工作，您必須聲明數組並在聲明時將其分配為空，如下所示：

data:any[]=[];

Answer 5

嘗試這個。 為您服務

getAll() {
    this.service.getAll(this.searchQuery).subscribe((results) => {
      this.loading = true;
      this.data = results.results;
      this.loading = false;
    })
}

在你的 html

<div *ngIf="data?.length===0">No Data</div>
<div *ngIf="data && data?.length !== 0">Result</div>

Answer 6

我使用這些代碼並解決了在沒有從 api 加載數據時顯示警報的問題：

    allNews: NewsDto[];
    <div *ngIf="allNews?.length==0" class="alert">There is not any news to show.</div>
    <div *ngFor="let news of allNews">
        <app-news-component [news]="news"></app-news-component>
    </div>