Question

我想在导航栏中创建一些动态下拉菜单。我在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>

Answer 1

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

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

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

0x06

STACKBLITZ DEMO

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

1 个答案: