如何使用angular 2创建动态Dropown?

时间:2018-12-01 17:53:16

标签: javascript angular

我想在导航栏中创建一些动态下拉菜单。我在javascript对象中有这些信息。想要使用这些数据来创建下拉菜单。例如:

假设我有一个像这样的javascript对象:

Food = 
[
  {
    Name : "Fruits",
    Item : 
    { 
      1 : "Apple", 
      2 : "Banana"}
    },
    {
     Name : "Drinks",
     Item : 
     {
        1 : "Milk",
        2 : "Tea"
     }
   }
]

想产生这样的东西

 
<ul>
  <li>Fruit
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Drink
    <ul>
      <li> Milk </li>
      <li> Tea </li>
    </ul>
  </li>
</ul>

需要帮助:

<ul *ngFor = "let f of Food">
    <li>{{f}}
         <ul *ngFor = "let i of Food.Item>
              <li>{{what to put here?}}</li>
         </ul>
    </li>
<ul>

1 个答案:

答案 0 :(得分:1)

首先,您的JSON无效。如果要将其作为有效的JSON,则应类似于

  

[{       “名称”:“水果”,       “项目”:{         “ 1”:“ Apple”,         “ 2”:“香蕉”       }},{       “名称”:“饮料”,       “项目”:{         “ 1”:“牛奶”,         “ 2”:“茶”       }}]

您拥有的是对象数组,而不是数组数组。因此,您需要按以下方式使用fieldname访问对象,

0x06

STACKBLITZ DEMO