Angular中用ng-if实现<td>标签条件闭合的可行方案问询

我完全懂你现在的困扰——Angular的模板语法要求标签必须严格嵌套，你想通过ng-container来拆分<td>的开闭标签，这种操作确实不被允许，因为模板编译器会认为标签结构不完整。不过不用慌，有几个改动量小的方案可以解决这个问题：

方案1：在完整的<td>内切换内容（最小改动） #

既然不能拆分<td>，那我们就把<td>保持完整，只在里面根据条件切换显示的内容。你只需要调整ng-container和ng-template的位置，不用改动外部已有的大量代码：

<td>
  some other code
  <ng-container *ngIf="riga.value['type'] === 'title'; else other">
    {{riga.value['description']}}
  </ng-container>
  <ng-template #other>
    {{riga.value['otherdescription']}}
  </ng-template>
</td>

这个方案的核心是让<td>始终作为一个完整的标签存在，条件只作用于内部的内容块，完美适配你不想大改现有代码的需求。

方案2：条件渲染完整的<td>标签 #

如果你的场景中，两种条件下的<td>需要不同的属性（比如不同的class、colspan等），可以直接渲染两个独立的<td>，用*ngIf控制显示：

<!-- 当type为title时显示这个td -->
<td *ngIf="riga.value['type'] === 'title'">
  some other code
  {{riga.value['description']}}
</td>
<!-- 其他情况显示这个td -->
<td *ngIf="riga.value['type'] !== 'title'">
  some other code
  {{riga.value['otherdescription']}}
</td>

如果some other code这段内容重复，你可以把它抽成一个复用的模板，避免代码冗余：

<ng-template #commonContent>
  some other code
</ng-template>

<td *ngIf="riga.value['type'] === 'title'">
  <ng-container *ngTemplateOutlet="commonContent"></ng-container>
  {{riga.value['description']}}
</td>
<td *ngIf="riga.value['type'] !== 'title'">
  <ng-container *ngTemplateOutlet="commonContent"></ng-container>
  {{riga.value['otherdescription']}}
</td>

方案3：自定义结构指令（复杂场景适用） #

如果以上方案都满足不了你的特殊需求（比如更复杂的标签控制逻辑），可以考虑自定义一个结构指令来处理这种动态标签的场景，但这个方案需要额外的代码开发，适合有一定Angular指令开发经验的情况，一般简单场景不推荐。

总的来说，方案1是最适合你的，改动量最小，又能实现需求，不用重构大量已有代码。

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