angular :ngIf 的else用法


1.首先我們看一下 *ngIf的用法

 <div *ngIf="display"> hello world </div>

在display為true 的時候,會顯示 hello world,如果想要在為false的時候展現另一個內容的時候時候呢?

 <div *ngIf="!display"> world</div>

雖然上種寫法可以達到需求,但相對麻煩點,這時候我們可以使用 *ngIf ;else 的寫法,

2.ngIf 的else 的使用

可以使用一個不會展示在內容上的<ng-template></ng-template>區塊

 <div *ngIf="isMobile; else notMobile">close</div> <ng-template #notMobile> <div> menu</div> </ng-template>

這個時候 當ngIf邏輯為false 時,notMobile這個<ng-template>內的 <div>menu</div>來取代close,就可以達到else 的效果了。

你以為這樣就結束了嗎?No No No

3. 在一個模版中可以共用ng-template

上文提到的是一個簡單的else使用場景,在事實上,多個ngIf的else 可以共用同一個ng-template;

 <div *ngIf="isMobile; else notMobile">close</div> <div *ngIf="isOpen; else notMobile">open</div> <ng-template #notMobile> <div> menu</div> </ng-template>

上述過程中,我們只建立一個<ng-template>並且只有一個 notMobile,當模版內的其他地方有else 需求時,都可以使用notMobile里的內容,就不用為每個*ngIf都建立一個<ng-template>。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM