我想知道爲什麼我必須使用此指令<div *ngIf="show">Text to show</div>
當我必須顯示一些來自http調用的文本/表單。 我知道,如果我不使用它的角度給了我喜歡一些錯誤:Angular 4 Ngif指令如何使用
風險價值是不確定的
,因爲當我顯示HTML綁定不包含任何價值varible。 但這是否是最佳做法?當我們遇到像這樣的情況時,總是需要嗎? 有沒有更好的方法來做到這一點?
我想知道爲什麼我必須使用此指令<div *ngIf="show">Text to show</div>
當我必須顯示一些來自http調用的文本/表單。 我知道,如果我不使用它的角度給了我喜歡一些錯誤:Angular 4 Ngif指令如何使用
風險價值是不確定的
,因爲當我顯示HTML綁定不包含任何價值varible。 但這是否是最佳做法?當我們遇到像這樣的情況時,總是需要嗎? 有沒有更好的方法來做到這一點?
您可以使用HTML模板中綁定的某個初始默認值來定義該變量。請參閱官方文檔https://angular.io/api/common/NgIf。讓我知道你是否有任何進一步的問題。
當頁面加載HTML時,Text to show
的值將不確定,因爲HTTP調用可能不會返回響應供您設置。
當HTTP調用返回時,然後您設置您的Text to show
它不再未定義,並且可以用HTML顯示。
所以這裏有兩種選擇:
設置Text to show
爲默認值,甚至是「」如果你喜歡。當HTTP調用返回時,然後覆蓋此值,並且角度綁定將更新視圖。
使用* ngIf指令,告訴angular不呈現該HTML(因此不需要那些未定義的變量)。如果頁面上有多個依賴於HTTP調用的變量,這非常有用。一旦呼叫全部返回所需數據並設置了所有變量,則可以將變量show
設置爲true,以允許HTML進行渲染並顯示變量。
官方文檔是在這裏:https://angular.io/guide/template-syntax#ngif
我通常結束了是showPage
變量和 <div *ngIf="showPage"></div>
包裝上的HTML頁面。 當我擁有所需的所有數據時,我將showPage
設置爲true。
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的d使用安全導航算子vs ngIf的「優點和缺點」。 https://angular.io/guide/template-syntax#the-safe-navigation-operator----and-null-property-paths – Alex
你不需要用'ngIf'處理它,你只需要以確保你的組件可以處理在HTTP調用完成之前該值不會存在的事實。例如,如果你的組件上的this.text被HTTP調用後設置,而不是讓它未定義,你可以將它設置爲一個空字符串或其他默認值。 –
所以,如果我不想初始化我需要ngIf的每個對象? @JoeClay – Alessandro