Angular 4 Ngif指令如何使用

Question

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

var a未定義

因為當我顯示html時，varible binded不包含任何值。 但這是最佳做法嗎？ 在有這樣的情況的時候總是必要的嗎？ 還有更好的方法嗎？

Answer 1

您可以使用您在HTML模板中綁定的一些初始默認值來定義變量。 請參閱官方文檔https://angular.io/api/common/NgIf 。 如果您有任何進一步的詢問，請告訴我。

Answer 2

當HTML加載到頁面上時， Text to show的Text to show的值將是未定義的，因為HTTP調用可能不會返回您設置它的響應。

當HTTP調用返回時，然后將Text to show設置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變量，以及頁面html上的<div *ngIf="showPage"></div>包裝器。 當我擁有頁面所需的所有數據時，我將showPage設置為true。

Answer 3

ngif表達式結果值不僅僅是布爾值true或false

但它將是您可能想要輕松引用的對象值。

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

典型用法：如果“事物”存在，則顯示“有事物”。 如果“事情”未定義。 什么都不顯示 'things'可以是boolean true / false，'things'可以是任何其他類型，可以只是一個對象的變量。

<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模板

ngif angular 4