Javascript 如何使用ngFor在angular2中加载多个子组件？

我使用angular2中的DynamicComponentLoader创建了几个具有给定名称的子组件。 &我可以使用它们的选择器以静态方式加载它们

例如。 我可以使用

加载

但我的问题是，这些组件名称存储在json文件中。 所以我想读取JSON文件并使用其变量名加载该组件

例如。 如果

uiComponent=“DYNAMIC-BODY-1”
然后我应该能够加载我的组件作为
加载

这是我的html：

<div class="row">
    <div *ngFor="#comp of record">        
        <div *ngFor="#pRow of comp.pageObj.pageRows">
            <div *ngFor="#sec of pRow.sections">
                <div *ngFor="#sRow of sec.sectionRows" class="col-md-{{(12/3)}}">
                    <div *ngFor="#srColumn of sRow.secRowColumns">
                       //prints component name i.e. DYNAMIC-BODY-1
                       {{srColumn.uiComponent}} 
                       //Loads the component
                       <DYNAMIC-BODY-1>Loading</DYNAMIC-BODY-1>
                       //what I want to achieve,this does not work
                       <div [innerHTML]="'<' + srColumn.uiComponent+ '></' + srColumn.uiComponent + '>'"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

不能以这种方式加载组件

<{{uiComponent}}>Loading</{{uiComponent}}>

等待数据到达，再多给点时间来渲染DOM。
我使用了动态组件加载程序bro，但我不知道如何使用内部循环？我明白了。我更新了我的答案。如果以这种方式创建HTML，则可以将标记用作
DynamicComponentLoader
的目标。我必须再次检查您的DCL代码。@gunter..它在html中插入了标记，但组件没有被呈现：（我以前错过了。您不能在构造函数中包含
DCL.loadAsRoot（…）
代码。此时动态创建html还不存在。您可以尝试在
subscribe中移动该代码({…，complete:（）=>{setTimeOut（（）=>{…}，1）}
等待数据到达，并提供更多的角度时间来渲染DOM。@gunter.您能更新您的答案吗，以便我可以参考
<div [innerHTML]="'<' + uiComponent + '></' + uiComponent + '>'"></div>

subscribe({/* process data - code omitted*/, 
    complete: () => {setTimeOut(() => {
    /* here the DOM should be rendered and dcl... should work */
    }, 1)});