Angular2 - 从JSON模式获取属性键以生成html模板

Question

我正在尝试的是动态生成菜单栏，为此我需要读取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或角本身，所以如果在代码或概念中完成愚蠢的错误，也不要忽视。

Answer 1

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; 
}