[英]Angular 2 render components inside ngFor
So I have tabs on one of my components. 因此,我在其中一个组件上具有选项卡。 Each tab I put in their own component namely TabOneComponent...TabTenComponent. 我将每个选项卡放入自己的组件中,即TabOneComponent ... TabTenComponent。 Then to display them I decided to put them in an array inside the component that will render them like this: 然后为了显示它们,我决定将它们放置在组件内部的数组中,该组件将像这样渲染它们:
tabs: Array<any> = [
{label: 'Tab One', id: 'tabone', class: 'active', template: '<tab-one></tab-one>'}
...
{label: 'Tab Ten', id: 'tabten', template: '<tab-ten></tab-ten>'}
]
Then to displayed them I created an ngFor like this: 然后为了显示它们,我创建了一个ngFor,如下所示:
<div class='tab-content'>
<div *ngFor="let t of tabs" class='tab-pane {{ t.class }}' id='{{ t.id }}' [innerHTML]="t.template | htmlSanitizer">
</div>
<div>
Note: htmlSanitizer is a pipe I created and it's working. 注意: htmlSanitizer是我创建的管道,正在运行。
The problem here is the template of each of the component doesn't render. 这里的问题是每个组件的模板都不会渲染。 So is it possible to do it or do I really need to put then individually like: 所以有可能做到这一点,或者我真的需要像下面这样单独放置:
<div class="tab-pane active" id="tabone">
<tab-one></tab-one>
</div>
...
<div class="tab-pane" id="tabten">
<tab-ten></tab-ten>
</div>
Thanks in advance! 提前致谢!
Edit 编辑
When I Inspect in Chrome under elements tab, I see that <tab-one></tab-one>
to <tab-ten></tab-ten>
is actually there it just doesn't render the actual component template. 当我在“元素”选项卡下的Chrome中进行检查时,我看到实际上是<tab-one></tab-one>
到<tab-ten></tab-ten>
的地方,只是它没有呈现实际的组件模板。
see if this works. 看看是否可行。
<div class="tab-content">
<div *ngFor="let t of tabs">
<div [attr.class] = "t.class tab-pane"
[attr.id] = "t.id"
[innerHTML] = "t.template | htmlSanitizer">
</div>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.