Angular 4 Ngif指令如何使用

Question

我想知道爲什麼我必須使用此指令<div *ngIf="show">Text to show</div>當我必須顯示一些來自http調用的文本/表單。 我知道，如果我不使用它的角度給了我喜歡一些錯誤：

風險價值是不確定的

，因爲當我顯示HTML綁定不包含任何價值varible。 但這是否是最佳做法？當我們遇到像這樣的情況時，總是需要嗎？ 有沒有更好的方法來做到這一點？

Answer 1

您可以使用HTML模板中綁定的某個初始默認值來定義該變量。請參閱官方文檔https://angular.io/api/common/NgIf。讓我知道你是否有任何進一步的問題。

Answer 2

當頁面加載HTML時，Text to show的值將不確定，因爲HTTP調用可能不會返回響應供您設置。

當HTTP調用返回時，然後您設置您的Text to show它不再未定義，並且可以用HTML顯示。

所以這裏有兩種選擇：

1. 設置Text to show爲默認值，甚至是「」如果你喜歡。當HTTP調用返回時，然後覆蓋此值，並且角度綁定將更新視圖。

2. 使用* ngIf指令，告訴angular不呈現該HTML（因此不需要那些未定義的變量）。如果頁面上有多個依賴於HTTP調用的變量，這非常有用。一旦呼叫全部返回所需數據並設置了所有變量，則可以將變量show設置爲true，以允許HTML進行渲染並顯示變量。

官方文檔是在這裏：https://angular.io/guide/template-syntax#ngif

我通常結束了是showPage變量和 <div *ngIf="showPage"></div>包裝上的HTML頁面。 當我擁有所需的所有數據時，我將showPage設置爲true。

Answer 3

ngif表達產生的價值將不只是布爾真或假

而是將是你可能想輕鬆地引用一個對象值。

things = { 
car: 'Honda', 
shoes: 'Nike', 
shirt: 'Tom Ford', 
watch: 'Timex' 
}; 

典型用法：如果'東西'存在，則顯示'有東西'。如果'東西'是未定義的。什麼都不顯示'東西'可能是布爾型的真/假，'東西'可能是任何其他類型，可能只是一個對象的變量。

<div *ngIf="things"> 
    there is things 
</div> 

例如：

<div *ngIf="things.car; else noCar"> 
    Nice car! 
</div> 

<ng-template #noCar> 
    Call a Uber. 
</ng-template> 

<!-- Nice car ! --> 

anthoer例如：

<div *ngIf="things.car; let car"> 
    Nice {{ car }}! 
</div> 
<!-- Nice Honda! --> 

ngif template

ngif angular 4