遍历Typescript中的array/JSON以使用子菜单构建Angular 2模板菜单 [英] Iterating over array/JSON in Typescript to build Angular 2 template menu with submenus
问题描述
更新:按需添加了Plunker会话. https://plnkr.co/edit/0XjAoxzjIoSUelFcfmrx (没有经验，所以没有经验可能需要帮助才能使其在Plunker上运行)
update: Plunker session added on request. https://plnkr.co/edit/0XjAoxzjIoSUelFcfmrx (no experience so will likely need help getting it to run on Plunker)
使用Node，Angular 2和Typescript构建菜单系统.创建带有手动添加的内容的输出效果很好，但是想要修改它以遍历更复杂的数组以创建菜单和子菜单项时遇到麻烦.我看到了 for(数组中的变量a)和 for(数组中的变量a)的示例，但困惑的是最好的方法.这是当前设置:
Building up a menu system using Node, Angular 2 and Typescript. Creating the output with manually added content works just fine, but having trouble wanting to mod this to iterate over a more complex array to create menu and sub-menu items. I see examples of for(var a in array) and for(var a of array), but perplexed as to which is the best way to go. Here is the current setup:
我的menu.component.ts:
my 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模板:
the menu.html template:
<div>
<h2>{{menuTitle}}</h2>
<ul>
<li *ngFor="#menu of menuContent">{{menu.name}} {{menu.id}}</li>
</ul>
</div>
以及放置菜单的index.ejs代码段:
and the index.ejs snippet where the menu is placed:
<body>
<jimmmenu></jimmmenu>
<jsTurfApp>Loading...</jsTurfApp>
<script src='/socket.io/socket.io.js'></script>
</body>
就像我说的，一切都可以像这样正常工作，产生一个简单的菜单项列表.但是当我尝试做类似的事情时:
As I said, everything works fine like this, producing a simple list of menu items. But when I try to do something like:
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; '.是的，我知道循环只会添加最后一个……肯定是一个不好的例子.
...things start going awry, such as the Chrome Inspector crying 'Uncaught SyntaxError: Unexpected token ;' on the line with the for(). And yes I know that the loop would only add the last one... it's a bad example, for sure.
基本上，我正在尝试执行以下操作，但是循环遍历menuData数组，而不是使用冗长的绘制菜单/子菜单分配手动填充menuContent:
Essentially I'm trying to do the following, but looping through the menuData array instead of populating menuContent by hand with long drawn-out menu/submenu assignments:
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结果似乎对类似的想法却很少，这就是为什么我向大家寻求帮助或朝着正确的方向前进的原因.赞赏任何见解.
Admittedly my Typescript and Angular 2 knowledge is small and the available google-results seems sparse on similar ideas, which is why I turn to you all for assistance or prodding in the right direction. Appreciate any insights.
推荐答案
为简单起见，您可以使用此方法:
You could use this approach for simplicity:
<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>
这篇关于遍历Typescript中的array/JSON以使用子菜单构建Angular 2模板菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
