Angular 5 - ngSwitch 和 ngSwitchCase 不在 html 的真实元素上

Question

我正在尝试根据组件字段类型属性创建不同的 html table 内容。我担心的是因为我正在操纵 html table 我不能在我的 tbody 中插入任何额外的 div 因此使用 ng-template 来涵盖这种情况但是我得到这个异常 "No provider for NgSwitch Error" .

我需要 ngSwitch 和 ngSwitchCase 不在 html 的真实元素上。

这是stackblitz url for my scenario

请在这里建议要做什么。

Answer 1

而不是使用 ng-template 使用 ng-container

Answer 2

ngSwitch 不能在 <ng-template> 元素上，只能在像 <div> 这样的真实元素上，或者您可以使用 <ng-container> 而不是真实元素

这是工作示例：

https://stackblitz.com/edit/angular-ftqywh?file=app/app.component.html

 <ng-container [ngSwitch]="type">
    <ng-container  *ngSwitchCase="'type1'">

<tr *ngFor="let myobj of obj">
  <td *ngFor="let data of myobj.arr"></td>
</tr>
    </ng-container>
 </ng-container>

Angular 5 - ngSwitch 和 ngSwitchCase 不在 html 的真实元素上

Angular 5 - ngSwitch & ngSwitchCase not to be on real element of html

angular

ng-switch