Question

我需要一些建议。我正在Angular2中开发一个仪表板。我的项目可以有不同的类型，我想显示与这些类型相关的组件。

这就是我现在的表现：

<div *ngIf="project.types.type1">
   <app-type1></app-type1>
</div>
<div *ngIf="project.types.type2">
   <app-type2></app-type2>
</div>
<div *ngIf="project.types.type3">
   <app-type3></app-type3>
</div>

但我想知道是否有可能以更优雅的方式编写它，看起来像这样：

   <div *ngFor="let key of project.types | keys">
       <template name="app-{{key}}></template>
    </div>

由于

Answer 1

这不是您正在寻找的循环解决方案，但它在优雅方面仍然略有改善，因为您目前的工作方式（在我看来）

<div [ngSwitch]="project.types">

  <app-type1 [*ngSwitchCase]="project.types.type1"></app-type-1>
  <app-type2 [*ngSwitchCase]="project.types.type2"></app-type-2>
  <app-type3 [*ngSwitchCase]="project.types.type3"></app-type-3>

</div>

Angular2动态组件显示

1 个答案: