如何制作仅使用 ng-container 的 if-else Angular 模板?

Question

我想在我的角度模板中做一个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 容器：

<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)

谁能解释一下这段代码出了什么问题？

Answer 1

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>

Answer 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>

Answer 3

值得一提的是，这个简单的替代方案可能比许多其他选项更具可读性。只需使用第二个 ng 容器，并且只是"不"使用感叹号来制作 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 >