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

Question

我正在尝试动态生成一个菜单栏，为此我需要读取一个 JSON 架构，获取其属性键并附加到 html 模板，该模板将被编译并加载了另一个 class。

第一次使用架构。

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();

    }

This prints all the properties key - like Menu, Home, About Us etc.

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

What it should be like is each tab item should be separate list item, coz I need to append different favicons to different tabs, so I need something like :

  <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 本身的新手，所以如果在代码或概念上犯了愚蠢的错误，请忽略。

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

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

Angular2 - get properties key from JSON Schema to generate html template

html

jsonschema

typescript

angular