如何在Angular中正确嵌套if else模板？默认模板异常显示问题

嘿，我完全get到你的问题了——你现在的代码里，每个分支都单独加了*ngIf，这就导致当第一个条件满足时，后面的分支可能因为自身的判断逻辑或者模板引用的问题，意外地和第一个分支一起显示出来，对吧？

问题根源 #

你当前的写法中，每个带模板引用（比如#second、#third）的<div>都自带了*ngIf判断。这意味着即使第一个条件已经触发，只要后面的something2或somethingelse也不为undefined，对应的分支还是会被渲染，最终就出现了多个内容同时显示的情况。而你需要的是严格的顺序判断：只有前面所有条件都不满足时，才走到默认模板。

解决方案一：修复else链（保留原有逻辑结构） #

把每个分支的*ngIf移到对应的else模板内部，用ng-container避免生成多余DOM元素，形成严格的链式判断：

<ng-container *ngIf="something !== undefined; else second">
  <a href="linkhere">{{ row[column] }}</a>
</ng-container>
<ng-template #second>
  <ng-container *ngIf="something2 !== undefined; else third">
    <a href="mailto:{{ row.email }}" (click)="stopProp($event)"></a>
  </ng-container>
</ng-template>
<ng-template #third>
  <ng-container *ngIf="somethingelse !== undefined; else defaultTemplate">
    <mat-icon color="warn" class="material-icons">clear</mat-icon>
  </ng-container>
</ng-template>
<ng-template #defaultTemplate>
  {{ row[column] }}
</ng-template>

这样的逻辑是：

1. 先检查something是否存在，存在则渲染第一个链接
2. 不存在则进入second模板，检查something2
3. something2存在则渲染邮件链接，不存在进入third模板
4. somethingelse存在则渲染警告图标，都不存在才显示默认模板

解决方案二：使用ngSwitch（更简洁的互斥分支） #

如果这三个条件是互斥的（不会同时满足多个），用Angular的ngSwitch会更清晰，天然保证只有一个分支被渲染：

<ng-container [ngSwitch]="true">
  <a *ngSwitchCase="something !== undefined" href="linkhere">{{ row[column] }}</a>
  <a *ngSwitchCase="something2 !== undefined" href="mailto:{{ row.email }}" (click)="stopProp($event)"></a>
  <mat-icon *ngSwitchCase="somethingelse !== undefined" color="warn" class="material-icons">clear</mat-icon>
  <span *ngSwitchDefault>{{ row[column] }}</span>
</ng-container>

这里ngSwitch绑定true，每个*ngSwitchCase对应一个条件，Angular会依次找到第一个为true的分支渲染，所有条件都不满足时，就会渲染*ngSwitchDefault里的默认内容。

小提示 #

建议用严格相等判断!== undefined代替!= undefined，避免因为类型转换导致的意外判断结果。

内容的提问来源于stack exchange，提问作者moe