我有搜索輸入，用戶將在其中輸入值并顯示匹配的記錄。我打電話getSearchResults進來ngOnit。
我需要在找到時顯示結果，否則如果 api 狀態為 false，則需要顯示“未找到結果”。
但是當我得到 api 回應時，它首先顯示“未找到結果”，然后顯示資料。
如果 api 狀態為真，如何避免首先顯示“未找到結果”？
我嘗試了不同的*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>
uj5u.com熱心網友回復：
這是因為當發生對 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>
uj5u.com熱心網友回復：
您應該初始化loadingFlag=true，默認情況下您正在加載資料，因此在您收到回應并修改loadingFlag=false 之前，您不會顯示No Result Data 的文本
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/384804.html
標籤：javascript 有角的 if 语句 angular-ng-if
下一篇：如何識別和標記特定列中的重復資料