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テンプレート内の特定の位置に追加することができます私を導いてください。

angle2やangle自体が新しいので、コードや概念が間違っていると無視されます。

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