Javascript 如果api响应中没有数据，则显示div

如果api响应中未收到数据，则显示div。下面的方法是最好的方法吗？现在，如果我用getAll（）方法点击搜索按钮，搜索框中没有任何内容，我将显示Div。但是如果我单击div away（关闭按钮）并重试，div不会出现吗？我必须循环函数吗？仅供参考，我也在使用引导

组件。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() {

  }
}

noData() {
    this.noData = false;
}  

从'@angular/core'导入{Component，OnInit}；
从“../../../services/api.service”导入{ApiService}；
从'@angular/forms'导入{FormGroup，FormControl}；
从'@angular/forms'导入{FormBuilder}；
从“@fortwome/free solid svg icons”导入{faSearch}；
从“@fortawesome/free solid svg icons”导入{faRedo}；
从“@fortwome/free solid svg icons”导入{faHeadphones}；
从“@fortwome/free solid svg icons”导入{faExternalLinkAlt}；
@组成部分({
选择器：“应用程序内容”，
templateUrl:'./content.component.html'，
样式URL:['./content.component.scss']
})
导出类ContentComponent{
公共数据=[]；
公共数据：任何；
公共加载=错误；
公共noData=false；
p：数字=1；
faSearch=faSearch；
法雷多=法雷多；
faHeadphones=faHeadphones；
faExternalLinkAlt=faExternalLinkAlt；
searchQuery:string=“”；
构造函数（私有服务：ApiService）{}
getAll（）{
this.service.getAll（this.searchQuery）.subscribe（（结果）=>{
这是。加载=真；
log（'接收到数据-结果-'，结果）；
this.data=results.results；
这一点：加载=错误；
如果（this.data.length=1）{
this.noData=false；
}否则{
this.noData=true；
}
})
}
刷新（）：无效{
window.location.reload（）；
}  
搜索（）{
this.service.getAll（this.searchQuery）.subscribe（（结果）=>{
这是。加载=真；
log（'接收到数据-结果-'，结果）；
this.data=results.results；
这一点：加载=错误；
})
}
恩戈尼尼特（）{
}
}

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>

神圣的鳄梨酱您应该在下面的一些字段中签入。
&时代；

试试这个，应该可以

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

或

---

最后，我刚刚从按钮中删除了

data dismise=“alert”

，并基于

noData

变量为关闭按钮添加了（单击）功能

Html

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

---

首先，我建议您从“容器”中取出ngIf，因为这可能会导致角度的问题。。。我使用数组的lenght属性来实现这一点

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

---

试试这个。为您效劳

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>

无数据
结果

此标记是否有结束标记？您在哪里对ngOnit调用此方法getAll（）？但在clickcondition调用getAll（）是错误的..您说如果数据长度小于或等于显示div..这是错误的请尝试我的回答是上面更新的。更新我的条件并删除html中可忽略的警报..然后它可能会工作。

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

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