Question

我有一个可以动态渲染离子组件的组件：

<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>

结果类似于：

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

但是我只需要离子成分，而不需要divs

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

如何以最低的冗余度实现这一目标？

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

<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>
...

Answer 1

您可以直接在*ngIf上使用ion-label

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

编辑：

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

那你就可以做

 <ion-label *ngIf="isDate">{{ toDate(data) }}<ion-label>
 <ion-label *ngIf="isLabel">{{ toDate(data) }}<ion-label>

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

<ng-container *ngIf="properties?.type === 'metaData'>
  <ng-container [ngSwitch]="properties?.controlType">
    <ion-label *ngSwitchCase="date">...</ion-label>
    <ion-label *ngSwitchCase="lavel">...</ion-label>
  </ng-container>
</ng-container>

动态渲染控件

1 个答案: