Angular ：如果结果为真，则避免首先显示 'No results found'

Question

我有搜索输入，用户将在其中输入值并显示匹配的记录。我正在 ngOnit.

中调用 getSearchResults

如果 api 状态为 false，我需要在找到时显示结果，然后需要显示 'No results found.'

但是当我得到 api 响应时它首先显示 'No results found' 然后找到数据。

如果 api 状态为真，如何避免首先显示 'No results found'？

我尝试了不同的 *ngIf 条件，但没有达到预期效果。

Ts

  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>

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

Answer 2

你应该初始化loadingFlag=true，默认情况下你正在加载数据，所以你不会显示无结果数据的文本，直到你得到响应并修改loadingFlag=false

Angular ：如果结果为真，则避免首先显示 'No results found'

Angular : avoid showing 'No results found' first if result is true

javascript

if-statement

angular-ng-if

angular