如何仅通过模板结合*ngIf条件程序化插入HTML闭合标签？

不行，你提供的写法会导致HTML结构不合法，Angular模板编译器会直接报错或渲染出异常的DOM结构。

Angular的模板严格遵循HTML语法规范，要求标签必须正确嵌套。你在ng-container里写入</tr><tr>这种拆分标签的方式，本质上是试图破坏HTML的闭合规则——模板编译器会识别到<tr>未正确闭合，最终要么编译失败，要么渲染出混乱的表格结构。

正确的实现方案 #

针对你的表格列拆分需求，有两种简洁且符合规范的写法：

1. 直接通过*ngIf控制整行显示

这是最直观的方案，根据视图尺寸条件渲染完整的行：

<table>
  <tbody>
    <!-- 大屏视图：一行展示4列 -->
    <tr *ngIf="largeView">
      <td>first name:</td>
      <td>{{firstName}}</td>
      <td>last name:</td>
      <td>{{lastName}}</td>
    </tr>

    <!-- 小屏视图：拆分为两行，每行2列 -->
    <tr *ngIf="!largeView">
      <td>first name:</td>
      <td>{{firstName}}</td>
    </tr>
    <tr *ngIf="!largeView">
      <td>last name:</td>
      <td>{{lastName}}</td>
    </tr>

    <!-- 其他表格行 -->
    <tr>
      ...
    </tr>
  </tbody>
</table>

2. 用ng-template复用重复内容（减少代码冗余）

如果表格内容重复度高，可以用ng-template提取复用片段：

<!-- 定义可复用的模板片段 -->
<ng-template #fieldLabel let-text="text">
  <td>{{text}}:</td>
</ng-template>
<ng-template #fieldValue let-val="val">
  <td>{{val}}</td>
</ng-template>

<table>
  <tbody>
    <tr *ngIf="largeView">
      <ng-container [ngTemplateOutlet]="fieldLabel" [ngTemplateOutletContext]="{text: 'first name'}"></ng-container>
      <ng-container [ngTemplateOutlet]="fieldValue" [ngTemplateOutletContext]="{val: firstName}"></ng-container>
      <ng-container [ngTemplateOutlet]="fieldLabel" [ngTemplateOutletContext]="{text: 'last name'}"></ng-container>
      <ng-container [ngTemplateOutlet]="fieldValue" [ngTemplateOutletContext]="{val: lastName}"></ng-container>
    </tr>

    <tr *ngIf="!largeView">
      <ng-container [ngTemplateOutlet]="fieldLabel" [ngTemplateOutletContext]="{text: 'first name'}"></ng-container>
      <ng-container [ngTemplateOutlet]="fieldValue" [ngTemplateOutletContext]="{val: firstName}"></ng-container>
    </tr>
    <tr *ngIf="!largeView">
      <ng-container [ngTemplateOutlet]="fieldLabel" [ngTemplateOutletContext]="{text: 'last name'}"></ng-container>
      <ng-container [ngTemplateOutlet]="fieldValue" [ngTemplateOutletContext]="{val: lastName}"></ng-container>
    </tr>
  </tbody>
</table>

核心原则 #

Angular模板中，所有条件渲染逻辑都必须作用于完整的元素/内容块，ng-container和ng-template的作用是包裹完整内容而非拆分标签。永远不要尝试通过条件来“拆分”HTML标签的开闭对，这会破坏DOM结构的合法性。

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