如何使用 angular2 检索到的数据作为 html 标记

How to use angular2 retrieved data as html tag?

本文关键字：html 标记 数据 何使用 angular2 检索      更新时间：2023-09-26

我正在阅读 angular2 中的 json 文件。到目前为止，我能够从json文件中获取数据。我在项目中创建了几个 angular2 组件，这些组件在此数据中有选择器。我想使用此数据作为 html 标记加载我的所有组件。即如果我得到col.uiComponent="HEADING"，那么我想将其用作

<HEADING></HEADING>

所以，我需要这样做

<col.uiComponent> Loading.. </col.uiComponent>

我尝试使用此代码：

<div *ngFor="#srColumn of sRow.secRowColumns">                        
   <{{srColumn.uiComponent}}>Loading </{{srColumn.uiComponent}}>                       
</div>

子组件

@Component({
selector: 'DYNAMIC-BODY-1',    
templateUrl: 'app/DYNAMIC-BODY-1/DYNAMIC-BODY-1.component.html'   
})

动态-身体-1.组件.html

<div class="col-sm-4 divDynamic">
    <table  style="width:100%;">
        <tr style="background-color:#B8B8B8">
            <th>{{comp.data}}</th>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
    </table>
    <br/>
</div>

使用DynamicComponentLoader我做到了。

constructor(dcl: DynamicComponentLoader, injector: Injector,private dataService: DataService) {
    dcl.loadAsRoot(DynamicBody1Component, 'DYNAMIC-BODY-1', injector);
 }

我的子组件具有选择器"动态主体-1"它的显示错误如下：

EXCEPTION: The selector "DYNAMIC-BODY-1" did not match any elements

请帮忙。

这

不起作用。不能使用动态绑定动态添加组件/指令。

Angular 有 DynamicComponentLoader 为此命令性地添加组件

另请参阅 https://stackoverflow.com/search?q=%5Bangular2%5D+dynamiccomponentloader

相关文章：