Как создать динамический спад с помощью Angular 2?

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, он должен выглядеть следующим образом:

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

Что выИмеется массив объектов, а не массив массивов. Поэтому вам необходимо получить доступ к объектам, используя имя поля следующим образом:

<ul *ngFor = "let f of Food">
    <li>{{f.Name}}
         <ul>
              <li>{{f.Item[1]}}</li>
               <li>{{f.Item[2]}}</li>
         </ul>
    </li>
<ul>

STACKBLITZ DEMO