如何仅使用 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-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)

任何人都可以解释一下这段代码出了什么问题吗？

Answer 1

ngIf

指令的代码期望传递对else分支的模板（

TemplateRef

）的引用，它将调用

createEmbeddedView

来显示嵌套内容。因此，尝试对 else 内容使用任何其他类型的元素是没有意义的 - 它就是行不通。不过，如果需要的话，您可以在

ng-container

内嵌套 ng-template

。

这可能看起来不直观，但请记住，

结构指令（即您用 *

 调用的指令）在引擎盖下

始终表示为 ng-template

，无论它们附加哪种元素to - 这两段代码是相同的：

<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

我不喜欢

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>

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 >

Answer 4

兄弟，所有答案都很好。 在我看来，根据当前的 Angular 17，我们可以使用 @if(){} 或 @if(){} @else if(){}。 使用这个之后，代码看起来更清晰，更具可读性。

@if(contributeur.deb){
   [.....any code]
}
@else if(!contributeur.deb){
   [.....any code]
}

就这样。

谢谢