Html 动态渲染控件

我有一个动态呈现离子组件的组件：

<div *ngIf="property && property.type === 'data'">

  <div *ngIf="property.controlType === 'label'">
    <ion-label>{{data}}</ion-label>
  </div>

  <div *ngIf="property.controlType === 'date'">
    <ion-label>{{ toDate(data) }}</ion-label>
  </div>

</div>

{{data}}
{{toDate（数据）}

结果是：

<div>
  <div>
     <ion-label>Hello World</ion-label>
  </div>
</div>

<ion-label *ngIf="property && property.type === 'data' && property.controlType === 'label'">{{data}}</ion-label>
<ion-label *ngIf="property && property.type === 'data' && property.controlType === 'date'">{{data}}</ion-label>
...

你好，世界

但我只需要离子成分，不需要div：

<ion-label>Hello World</ion-label>

你好，世界

如何以最低的冗余度实现这一点

编辑： 我不想要这样的东西：

<div>
  <div>
     <ion-label>Hello World</ion-label>
  </div>
</div>

<ion-label *ngIf="property && property.type === 'data' && property.controlType === 'label'">{{data}}</ion-label>
<ion-label *ngIf="property && property.type === 'data' && property.controlType === 'date'">{{data}}</ion-label>
...

{{data}
{{data}}
...

您可以直接在

离子标签上使用
*ngIf

{{toDate（数据）}

编辑：

否则，您可以在component类内创建这些检查，并将这些值应用于布尔属性，如
isDate
或
isLabel

那你就可以了

{{toDate（数据）}
{{toDate（数据）}

否则，您可以使用
ng容器
，它不会像
div
那样在构建文件中添加额外级别的html。结合switchCase，您最终会发现：

这将导致大量相同的代码（参见问题中的最后一条注释）使用两种不同的方法更新我的答案