Angular：如果结果为真，请避免首先显示“未找到结果”答案

【问题标题】：Angular : avoid showing 'No results found' first if result is trueAngular：如果结果为真，请避免首先显示“未找到结果”
【发布时间】：2021-12-14 19:36:10
【问题描述】：

我有搜索输入，用户将在其中输入值并显示匹配的记录。我在ngOnit 中打电话给getSearchResults。

我需要在找到时显示结果，否则如果 api 状态为 false，则需要显示“未找到结果”。

但是当我得到 api 响应为 true 时，它首先显示“未找到结果”，然后显示找到数据。

如果 api 状态为真，如何避免首先显示“未找到结果”？

我尝试了不同的*ngIf 条件，但没有按预期工作。

  searchResults:any;
  searchResultsFlag:boolean = false;
  horseResults:any;
  userResults:any;

  getSearchResults(){
    this.SpinnerService.show();  
    this.horseService.SearchProfile(this.searchValue).subscribe((results) => {
    
      if (results['status'] === false) {
        this.SpinnerService.hide();  
        this.searchResultsFlag = false;
      } else {
        this.SpinnerService.hide();  
        this.searchResultsFlag = true;
        this.searchResults = results['data'];
        this.horseResults = this.searchResults.horses;
        this.userResults =this.searchResults.users;

      }

    });
  }

HTML

<div class="horse_slider_wrap search_result_card" *ngIf="searchResultsFlag">
    <h5 class="mb-3" *ngIf="userResults && userResults.length>0">Matched User Results</h5>
    <div class="row">          
   
      <div class="col-lg-3" *ngFor="let user of userResults">
        ....
      </div>
      
    </div>
    <h5 class="mb-3" *ngIf="horseResults && horseResults.length>0">Matched Horse Results</h5>
    <div class="row">   
      
      <div class="col-lg-3" *ngFor="let horse of horseResults">
      ....
      </div>
    </div>
   
  </div>
  <p *ngIf="!searchResultsFlag">No results found.</p>

【问题讨论】：

标签： javascript angular if-statement angular-ng-if

【解决方案1】：

发生这种情况是因为当对 API 的 http 请求发生时，您的 searchResultsFlag os 设置为 false。

要修复它，您应该创建一个加载标志：

searchResults:any;
  searchResultsFlag:boolean = false;
  loadingFlag = false;
  horseResults:any;
  userResults:any;

  getSearchResults(){
    this.SpinnerService.show();  
    this.loadingFlag = true;
    this.horseService.SearchProfile(this.searchValue).subscribe((results) => {
    
      if (results['status'] === false) {
        this.SpinnerService.hide();  
        this.searchResultsFlag = false;
      } else {
        this.SpinnerService.hide();  
        this.searchResultsFlag = true;
        this.searchResults = results['data'];
        this.horseResults = this.searchResults.horses;
        this.userResults =this.searchResults.users;

      }

      this.loadingFlag = false:

    });
  }

HTML


<div class="horse_slider_wrap search_result_card" *ngIf="searchResultsFlag">
    <h5 class="mb-3" *ngIf="userResults && userResults.length>0">Matched User Results</h5>
    <div class="row">          
   
      <div class="col-lg-3" *ngFor="let user of userResults">
        ....
      </div>
      
    </div>
    <h5 class="mb-3" *ngIf="horseResults && horseResults.length>0">Matched Horse Results</h5>
    <div class="row">   
      
      <div class="col-lg-3" *ngFor="let horse of horseResults">
      ....
      </div>
    </div>
   
  </div>
  <p *ngIf="!searchResultsFlag && !loadingFlag">No results found.</p>

【讨论】：

谢谢。它的工作。只是出于好奇，我试图在声明时不将 searchResultsFlag 设置为 false。但这也行不通。知道为什么吗？为什么我们需要新变量？是否可以在一个变量中进行管理？

【解决方案2】：

你应该初始化loadingFlag=true，默认你正在加载数据，所以在你得到响应并修改loadingFlag=false之前你不会显示No Result Data的文本

【讨论】：