Angular:避免显示'未找到任何结果'首先，若结果为真

Question

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

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

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

如果api状态为true，如何避免首先显示"未找到结果"？

我尝试了不同的*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被设置为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 之前，您不会显示"无结果数据"的文本