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

Question

我正在尝试动态生成一个菜单栏，为此我需要读取一个JSON Schema，获取其属性键并附加到html模板，而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或angular本身的新手，所以如果在代码或概念中犯了愚蠢的错误，请忽略。