[英]How to make a if-else Angular template with only ng-container?
我想在我的 angular 模板中做一個 if-else 語句。 我從那開始:
<ng-container *ngIf="contributeur.deb; else newDeb" >
[... HERE IS A RESULT 1]
</ng-container>
<ng-template #newDeb>
[... HERE IS A RESULT 2]
</ng-template>
我嘗試只使用 ng-container :
<ng-container *ngIf="contributeur.deb; else newDeb" >
[... HERE IS A RESULT 1]
</ng-container>
<ng-container #newDeb>
[... HERE IS A RESULT 2]
</ng-container >
不幸的是,這不起作用。 我有這個錯誤:
ERROR TypeError: templateRef.createEmbeddedView is not a function
at ViewContainerRef_.createEmbeddedView (eval at <anonymous> (vendor.bundle.js:11), <anonymous>:10200:52)
at NgIf._updateView (eval at <anonymous> (vendor.bundle.js:96), <anonymous>:2013:45)
at NgIf.set [as ngIfElse] (eval at <anonymous> (vendor.bundle.js:96), <anonymous>:1988:18)
at updateProp (eval at <anonymous> (vendor.bundle.js:11), <anonymous>:11172:37)
at checkAndUpdateDirectiveInline (eval at <anonymous> (vendor.bundle.js:11), <anonymous>:10873:19)
at checkAndUpdateNodeInline (eval at <anonymous> (vendor.bundle.js:11), <anonymous>:12290:17)
at checkAndUpdateNode (eval at <anonymous> (vendor.bundle.js:11), <anonymous>:12258:16)
at debugCheckAndUpdateNode (eval at <anonymous> (vendor.bundle.js:11), <anonymous>:12887:59)
at debugCheckDirectivesFn (eval at <anonymous> (vendor.bundle.js:11), <anonymous>:12828:13)
at Object.eval [as updateDirectives] (ActionsButtons.html:5)
誰能解釋一下這段代碼出了什么問題?
ngIf
指令的代碼期望傳遞對 else 分支的模板( TemplateRef
)的引用,它將調用createEmbeddedView
以顯示嵌套內容。 因此,嘗試將任何其他類型的元素用於 else 內容是沒有意義的 - 它只是行不通。 你能巢的ng-container
內ng-template
如果需要的話,雖然。
這可能看起來不直觀,但請記住, 結構指令(即您用*
調用的指令)始終表示為引擎蓋下的ng-template
,無論它們附加到哪種元素 - 這兩段代碼是相同的:
<ng-container *ngIf="contributeur.deb; else newDeb" >
...
</ng-container>
<ng-template #newDeb>
...
</ng-template>
<ng-template [ngIf]="contributeur.deb; else newDeb">
<ng-container>
...
</ng-container>
</ng-template>
<ng-template #newDeb>
...
</ng-template>
我不喜歡if then else的標准 Angular 結構。 然后我找到了ngSwitch的替代解決方案:
<ng-container [ngSwitch]="isFirstChoice(foo) ? 1 : (isSecondChoice(foo) ? 2 : -1)">
<ng-container *ngSwitchCase="1">
...first choice...
</ng-container>
<ng-container *ngSwitchCase="2">
...second choice...
</ng-container>
<ng-container *ngSwitchDefault>
...another choice...
</ng-container>
</ng-container>
為了回答你的要求,我會用這個:
<ng-container [ngSwitch]="contributeur.deb && 'isDeb'">
<ng-container *ngSwitchCase="'isDeb'">
......
</ng-container>
<ng-container *ngSwitchDefault>
......
</ng-container>
</ng-container>
值得一提的是,這個簡單的替代方案可能比許多其他選項更具可讀性。 只需使用第二個 ng-container,並用感嘆號'not'-ing 條件來制作 else 部分。
<ng-container *ngIf="contributeur.deb" >
[... HERE IS A RESULT 1]
</ng-container>
<ng-container *ngIf="!contributeur.deb">
[... HERE IS A RESULT 2]
</ng-container >
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.