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