在 Typescript 中迭代数组/JSON 以构建带有子菜单的 Angular 2 模板菜单答案

【问题标题】：Iterating over array/JSON in Typescript to build Angular 2 template menu with submenus在 Typescript 中迭代数组/JSON 以构建带有子菜单的 Angular 2 模板菜单
【发布时间】：2016-04-14 13:11:06
【问题描述】：

更新：根据要求添加了 Plunker 会话。 https://plnkr.co/edit/0XjAoxzjIoSUelFcfmrx （没有经验，所以可能需要帮助才能让它在 Plunker 上运行）

使用 Node、Angular 2 和 Typescript 构建菜单系统。使用手动添加的内容创建输出效果很好，但是想要修改它以迭代更复杂的数组以创建菜单和子菜单项时遇到了麻烦。我看到了for(var a in array) 和for(var a of array) 的例子，但不知道哪个是最好的方法。这是当前的设置：

我的 menu.component.ts：

import {Component} from 'angular2/core';

export class MenuContent {
  constructor (
    public id: number,
    public name: string
  ) { }
}

@Component({
  selector: 'jimmmenu',
  templateUrl: 'app/menu.html'
})

export class MenuComponent {
  menuTitle = 'Menu!';

  menuContent = [
    new MenuContent(1, 'menu item'),
    new MenuContent(2, 'menu item'),
    new MenuContent(3, 'menu item'),
    new MenuContent(4, 'menu item')
  ]

  Menu = this.menuContent[0];

}

menu.html 模板：

<div>
    <h2>{{menuTitle}}</h2>
    <ul>
        <li *ngFor="#menu of menuContent">{{menu.name}} {{menu.id}}</li>
    </ul>
</div>

以及放置菜单的index.ejs sn-p：

<body>
    <jimmmenu></jimmmenu>
    <jsTurfApp>Loading...</jsTurfApp>
    <script src='/socket.io/socket.io.js'></script>
</body>

正如我所说，一切正常，生成一个简单的菜单项列表。但是当我尝试做类似的事情时：

menuData = {
    "menu": [
      { "id": 0, "name": "DasnBoard", "image":"/Images/dashboard_on.gif", "link": "page0.html", 
        "subMenu": [
          { "id": 10, "name": "Main", "image": null, "link": "page1.html", "subMenu": null },
          { "id": 11, "name": "ET & Moisture", "image": null, "link": "page2.html", "subMenu": null }
        ]
      },
    ]
  };

for(var m in menuData) {
    menuContent = [ new MenuContent(this.menuData.menu[m].id, this.menuData.menu[m].name); ]
  }

...事情开始出错，例如 Chrome Inspector 在与 for() 对应的线上喊“Uncaught SyntaxError: Unexpected token ;”。 是的，我知道循环只会添加最后一个......这是一个不好的例子，当然。

基本上我正在尝试执行以下操作，但循环遍历 menuData 数组，而不是使用冗长的菜单/子菜单分配手动填充 menuContent：

menuContent = [
  new MenuContent(this.menuData.menu[0].id, this.menuData.menu[0].name),
  new MenuContent(this.menuData.menu[0].subMenu[0].id, this.menuData.menu[0].subMenu[0].name),
...
]

诚然，我的 Typescript 和 Angular 2 知识很少，可用的 google-results 似乎很少有类似的想法，这就是为什么我向大家寻求帮助或朝着正确的方向寻求帮助。欣赏任何见解。

【问题讨论】：

请创建一个允许重现问题的 Plunker plnkr.co/edit/dbb6gn?p=info
我没有这方面的经验，但是今晚我回家后会尝试一下。感谢您的想法！
这并不难。如果您遇到困难，请添加评论。我更喜欢 template: 而不是 Plunkers 中的 templateUrl，因为否则很难研究代码。
Gotcha .. 开始添加东西，但现在在回家的路上......一旦我接触到一台真正的电脑，最好做这些东西。 :) plnkr.co/edit/0XjAoxzjIoSUelFcfmrx
Plunker 已更新（请参阅上面的链接或主要问题文本中的链接。不知道我在用它做什么......似乎没有输出任何东西。：/

标签： javascript arrays typescript angular

【解决方案1】：

为了简单起见，您可以使用这种方法：

<ul class="menu">
<li *ngFor="#item of items">
    <a>{{item.name}}</a>
    <ul class="sub-menu">
        <li *ngFor="#subitem of item.subMenu">
            <label>{{subitem.name}}</label>
        </li>
    </ul>
</li>
</ul>

【讨论】：

啊...在我的例子中，'items' 是上面的 menuData 数组？
是的，menuData.menu，它应该是菜单项数组。
将在早上第一时间尝试并报告。
好吧，我会被诅咒的......它工作得很好，并且不会弄乱组件中的代码。现在我可以制定一个有条件的 *ngIF 来检测任何 3 级子菜单，我会很成功。感谢@kemsky 和 Günter 的帮助！