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