我想在我的角度模板中创建一个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)
有人能解释一下这段代码出了什么问题吗?
答案 0 :(得分:30)
The code for the ngIf
directive期望传递对else分支的模板(TemplateRef
)的引用,它将调用createEmbeddedView
来显示嵌套内容。因此,尝试对else内容使用任何其他类型的元素是没有意义的 - 它只是不起作用。如果需要,您可以在ng-container
内嵌入ng-template
。
这可能看似不直观,但请记住,structural directives(即您使用*
调用的那些)总是表示为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>
git fetch PARENT
答案 1 :(得分:2)
我不喜欢如果不是的标准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>