在我的 Angular 專案中，我從 API 獲取資料并在前端顯示。我正在使用 ngIf 來顯示資料，如果沒有可用的資料，則elseNotDone顯示。
我面臨的問題是當組件重新加載時，我首先看到 No Data available幾毫秒，然后顯示資料
如何確保初始渲染時不顯示其他條件？
<section *ngIf="data!== undefined && data.length > 0; else elseNotDone">
<h2>Amazon Data</h2>
<div>
// display data from API
</div>
</section>
<ng-template #elseNotDone>
No Data available
</ng-template>
uj5u.com熱心網友回復：
這是因為組件在資料到達之前進行了初始化。一旦資料到達，組件就可以使用它。
我強烈建議學習有關防止組件在資料可用之前初始化的 Angular 決議器。這允許您實作諸如加載器/微調器/等之類的東西，它們會在獲取資料時出現。
編輯： 來自 Angular 檔案： https ://angular.io/api/router/Resolve
uj5u.com熱心網友回復：
你不必要地把它復雜化了：
*ngIf="data !== undefined && data.length > 0; else elseNotDone"
將其更改為：
*ngIf="data && data.length > 0; else elseNotDone"
對于您的主要問題：創建一個變數isLoaded并將您的代碼包裝在其中：
<div *ngIf="isLoaded">
.... your code...
</div>
在加載資料之前顯示任何內容將解決您的問題。
uj5u.com熱心網友回復：
使用 isLoaded 條件將您的代碼包裝在 ng-container 中，如果您從 API 獲得回應，您應該“真”這個變數
<ng-container *ngIf="isLoaded">
<section *ngIf="data && data.length > 0; else elseNotDone">
<h2>Amazon Data</h2>
<div>
// display data from API
</div>
</section>
<ng-template #elseNotDone>
No Data available
</ng-template>
</ng-container>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/427220.html
標籤：javascript html 有角度的 打字稿 角度ng-if
下一篇：reduce方法未通過單元測驗