Angular 5：如何在非真实HTML元素上使用ngSwitch与ngSwitchCase？

你遇到的No provider for NgSwitch Error本质原因是：ngSwitch指令需要依附在一个可作为指令宿主的元素上，而ng-template本身只是一个模板容器，并非真实DOM元素，也不能作为指令宿主，所以没法提供NgSwitch的依赖注入。

结合你在表格tbody中渲染不同字段类型的场景，给你两个可行的解决方案：

方案1：将ngSwitch绑定到tbody元素上 #

tbody是合法的真实DOM元素，可以直接作为ngSwitch的宿主，然后在内部用ng-template配合ngSwitchCase来渲染对应的表格行，完全符合HTML规范（tbody内只能放tr元素）：

<tbody [ngSwitch]="field.type">
  <!-- 文本类型字段 -->
  <ng-template ngSwitchCase="text">
    <tr>
      <td>{{field.label}}</td>
      <td><input type="text" [(ngModel)]="field.value"></td>
    </tr>
  </ng-template>

  <!-- 数字类型字段 -->
  <ng-template ngSwitchCase="number">
    <tr>
      <td>{{field.label}}</td>
      <td><input type="number" [(ngModel)]="field.value"></td>
    </tr>
  </ng-template>

  <!-- 默认情况 -->
  <ng-template ngSwitchDefault>
    <tr>
      <td>{{field.label}}</td>
      <td>{{field.value}}</td>
    </tr>
  </ng-template>
</tbody>

这种方式的好处是直接利用现有tbody元素，不需要额外添加容器，代码逻辑清晰。

方案2：用ng-container作为ngSwitch的宿主 #

如果你不想把ngSwitch绑定在tbody上（比如tbody内需要同时渲染多个不同逻辑的行），可以用Angular提供的<ng-container>——它是一个虚拟容器，不会被渲染成真实DOM节点，完全可以放在tbody内，同时能作为ngSwitch的宿主：

<tbody>
  <ng-container [ngSwitch]="field.type">
    <!-- 文本类型字段，用*ngSwitchCase语法糖更简洁 -->
    <tr *ngSwitchCase="'text'">
      <td>{{field.label}}</td>
      <td><input type="text" [(ngModel)]="field.value"></td>
    </tr>

    <!-- 数字类型字段 -->
    <tr *ngSwitchCase="'number'">
      <td>{{field.label}}</td>
      <td><input type="number" [(ngModel)]="field.value"></td>
    </tr>

    <!-- 默认情况 -->
    <tr *ngSwitchDefault>
      <td>{{field.label}}</td>
      <td>{{field.value}}</td>
    </tr>
  </ng-container>
</tbody>

这里用*ngSwitchCase语法糖替代了ng-template，代码更简洁，同时ng-container不会在DOM中生成额外节点，完全符合tbody的内容规范。

两种方案都能解决No provider for NgSwitch的错误，你可以根据自己的代码结构选择更合适的一种～

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