Question

我正在遍历对象数组，并在对象内部要指定要加载的组件。例如，循环中的一项是

{
  label: 'Patient\'s Weight',
  subtitle: '',
  component: WeightComponent,
},

在循环中，我想呈现WeightComponent，但它只是将function WeightComponent()呈现为文本。

我知道我这样做不正确，但是我不确定正确的方法是什么。我也尝试过

{
  label: 'Patient\'s Weight',
  subtitle: '',
  component: '<app-weight></app-weight>',
},

但是也只是呈现为文本。我需要使用渲染服务类型的东西吗？我看到了使用[innerHTML] How to translate HTML string to real HTML element by ng-for in Angular 2?的建议，但他们说这条路线容易受到攻击。

当前这样做不理想

<div *ngFor="let step of selectedDosing.steps; index as i" class="step" [attr.step]="i">
  <ion-label class="step-title">
    <span class="number">{{ i + 1 }}</span>
    <span class="labels">
      <div class="main-label">{{ step.label }}</div>
      <div class="subtitle">{{ step.subtitle }}</div>
    </span>
  </ion-label>
  <app-hepatic-impairment *ngIf="step.component == 'hepatic-impairment'"></app-hepatic-impairment>
  <app-recommended *ngIf="step.component == 'recommended'"></app-recommended>
  <app-weight *ngIf="step.component == 'weight'"></app-weight>
</div>

Answer 1

有一个内置的NgComponentOutlet指令可以帮助您完成任务。

您需要做的就是将这些组件添加到entryComponents或NgModule的{{1}}数组中，然后按如下所示简单使用它：

ts

Component

html

steps: [
  {
    label: 'label',
    component: WeightComponent,
  },
  {
    label: 'label',
    component: RecommendedComponent,
  },
  {
    label: 'label',
    component: WeightComponent,
  },
]

Ng-run Example

ngFor中的渲染组件

1 个答案: