Angular2 - 从JSON模式获取属性键以生成html模板
问题描述:
我正在尝试的是动态生成菜单栏,为此我需要读取JSON模式,获取其属性键并追加到html模板中,这反过来会得到编译并加载到另一个类中。Angular2 - 从JSON模式获取属性键以生成html模板
第一次使用模式。
import { Component } from '@angular/core';
import { HtmlOutlet } from './html-outlet';
@Component({
selector: 'my-home',
template: `<html-outlet [html]="value"></html-outlet>`,
})
export class HomeComponent {
menu = MENU;
pros = new Array<string>();
arrayofKeys = new Array<string>();
arrayLabelKeys = new Array();
value: string;
constructor() {
this.value = this.prepareMenuHtml();
}
ngOnInit() {
let configObj = JSON.parse(`{
"title": "Example Schema",
"type": "object",
"properties": {
"MENU": {
"type": "object"
},
"HOME": {
"type": "string"
},
"ABOUT US": {
"type": "string"
},
"CONTACT": {
"type": "string"
},
}
}`);
this.pros = configObj["properties"];
this.arrayofKeys = Object.keys(this.pros);
/* this.arrayofKeys.forEach(key => {
this.arrayLabelKeys.push(key);
console.log(this.arrayLabelKeys);
}) */
this.value = this.prepareMenuHtml();
}
这将打印的所有属性的关键 - 就像菜单,主页,关于我们等
prepareMenuHtml(): string {
let Menu = '<div>';
this.arrayofKeys.forEach(key => {
Menu += `<nav class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li><a href="#">${key}</a></li>
</ul>
</div>
</nav>`;
});
Menu += '</div>';
return Menu
}
}
什么应该是这样是每个标签项目应单独列表项,因为我需要将不同的图标附加到不同的标签,所以我需要类似:
<li><a href="#">${key.something}</a></li>
或可能
<li><a href="#">{{key.something}}</a></li>
prepareMenuHtml(): string {
let Menu = '<div>';
this.arrayofKeys.forEach(key => {
Menu += `<nav class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li><a href="#"><span class="glyphicon glyphicon-menu-hamburger"></span>Menu</a></li>
<li><a href="#"><span class="glyphicon glyphicon-home"></span>Home</a></li>
<li><a href="#">${key}</a></li>
<li><a href="#">${key}</a></li>
</ul>
</div>
</nav>`;
});
Menu += '</div>';
return Menu
}
}
请指引我要去错在何处,我如何能得到的属性键和追加到HTML模板中的特定位置。
新的angular2或角本身,所以如果在代码或概念中完成愚蠢的错误,也不要忽视。
答
prepareMenuHtml(): string {
let Menu = '<div>';
Menu += `<nav class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav">`;
this.arrayofKeys.forEach(key => {
Menu += `<li><a href="#"><span class="glyphicon glyphicon-${??glyphiconName??}"></span>${key}</a></li>`;
});
Menu += '</ul></div></nav></div>';
return Menu;
}
感谢了很多,想通了如何通过glyphiconName上也同样iteration..just创造了JSON模式“图像”一个额外的标签,取而代之的值,你的代码建议。 – Ranjan
的确,这就是它应该做的! :) – mxii