Angular2 -获取json值以将值替换为html模板
Angular2 -获取json值以将值替换为html模板
提问于 2016-12-01 04:31:20
对于angular2来说，遇到了从Footer[]数组中提取值并显示它的问题。
footer.component.ts:
import { Component } from '@angular/core';
export class Footer {
id: number;
value: string;
}
const FOOTER : Footer[] = [
{id: 1, value: 'value_one'},
{id: 2, value: 'value_two'}
];
@Component({
selector: 'footer',
template: `<html-outlet [html]="footerValue"></html-outlet>`,
})
export class FooterComponent{
foot = FOOTER;
footerValue = `<div class="menu" *ngFor="let f of foot" >
<div class="footer"><b>{{f.value}} @2016</b></div>
</div>`;
}罪人：
template:`<html-outlet [html]="footerValue"></html-outlet>`,从'footerValue‘获取模板并发送到另一个函数，用于动态编译和加载html。
如果它直接通过的话，所有操作都很好：
template: `<div class="menu" *ngFor="let f of foot" >
<div class="footer"><b>{{f.value}} @2016</b></div>
</div>`,有人能指导我如何将数组中的值附加到字符串变量'footerValue‘中，以遵循我最初的功能生成html。
原来的html模板是：
`<div class="menu" *ngFor="let f of foot" >
<div class="footer"><b>Example @2016</b></div>
</div>`其中的“示例”应该由数组中的值替换。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-12-01 04:35:42
我想问题是你的html-outlet试图“编译”你的html片段，但不知道什么是foot。
所以，像这样准备html片段：
constructor() {
this.footerValue = this.prepareFooterHtml();
}
prepareFooterHtml(): string {
let footer = '<div class="menu">';
this.foot.forEach(f => {
footer += `<div class="footer"><b>${f.value} @2016</b></div>`;
});
footer += '</div>';
return footer;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40910764
复制相关文章
相似问题
腾讯云开发者
