Javascript 是否可以使用ngFor显示多个组件选择器标记？

我在第二节有个问题。 因此，我能够使用ngFor显示来自本地json的{{data}}标记并显示数据

然而，我想知道是否有一种方法可以呈现存储在json中的组件选择器标记，并在ng for中显示它们。例如 我的文件中有这个json组件.ts（请参阅注释以了解有关该问题的解释）

从'@angular/core'导入{Component，OnInit}；
将*作为jQuery从“jQuery”导入；
@组成部分({
选择器：“应用程序仪表板”，
templateUrl:“./dashboard.component.html”，
样式URL:['./dashboard.component.css']
})
导出类DashboardComponent实现OnInit{
小部件；
构造函数（）{}
恩戈尼尼特（）{
此参数为0.widgets=[
{
“widgetcode”：“”//angular cli系统中现有的组件选择器标记
},
{
“widgetcode”：“”//angular cli系统中现有的组件选择器标记
},
{
“widgetcode”：“”//angular cli系统中现有的组件选择器标记
}
]
}
}

my component.html文件：

    <div class="DahsboardWrapper">

<!-- DashBoard Ges here -->

<!-- widget elements go here -->
<div class="DashoardHeaderClass" id="dashboard">
Dashboard Loaded
<div class="WidgetAreaWrapper">
<div class="widgets" *ngFor="let widget of widgets">


 <!-- {{widget.widgetcode}}  Not working atm..-->
<!-- this is displayng just plain text -->
</div>

<!-- This is working --> 
<app-analytics-widget></app-analytics-widget>
<app-club-chooser></app-club-chooser>
<app-account-widget></app-account-widget>

</div>
</div>

仪表板已加载

---

有什么建议吗？也许有更好的方法吗？

您不能从选择器开始。这在使用提前（AoT）编译器的生产环境中无论如何都不起作用，因为编译器在构建时运行，并且它是将选择器与组件和指令相匹配的东西

如果您心里有一组有限的标记，那么可以使用。您支持的每个组件都是一个

开关

大小写

s，您可以通过JSON中的某个字符串属性选择要显示的组件。整个

[ngSwitch]

将是

ngFor

项

如果您需要支持更复杂的场景，并且正在使用Angular 4，则可以使用。这仍然需要类型（导入类）而不是选择器

---

最后，也是Angular 4，一般来说，对于动态加载组件，您可以通过本库支持的多种方式选择最适合您的方式。

谢谢您的帮助。ngSwitch工作起来很有魅力。对于任何想在未来使用它的人，这里有一个很好的指南。

    <div class="DahsboardWrapper">

<!-- DashBoard Ges here -->

<!-- widget elements go here -->
<div class="DashoardHeaderClass" id="dashboard">
Dashboard Loaded
<div class="WidgetAreaWrapper">
<div class="widgets" *ngFor="let widget of widgets">


 <!-- {{widget.widgetcode}}  Not working atm..-->
<!-- this is displayng just plain text -->
</div>

<!-- This is working --> 
<app-analytics-widget></app-analytics-widget>
<app-club-chooser></app-club-chooser>
<app-account-widget></app-account-widget>

</div>
</div>