在Typescript中对array/JONS进行迭代，以构建带有子菜单的Angular 2模板菜单

Iterating over array/JSON in Typescript to build Angular 2 template menu with submenus

本文关键字：菜单 Angular 构建 array 中对 Typescript JONS 迭代      更新时间：2023-09-26

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

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

我的菜单组件.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片段：

<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检查器在带有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的了解很少，而且谷歌上的搜索结果似乎很少有类似的想法，这就是为什么我向大家寻求帮助或朝着正确的方向前进。感谢您的真知灼见。

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

<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>
相关文章：