Понимание *ngFor от Angular 2

Question

Я пытаюсь использовать вложенный *ngFor в моем проекте Angular для рендеринга динамического меню. Я пытаюсь что-то вроде этого:

<li class="treeview" *ngFor="let pm of parentMenu">

    <a href="#">
      <i class="fa fa-edit"></i> <span>{{pm.MenuTitle}}</span>
      <span class="pull-right-container">
        <i class="fa fa-angle-left pull-right"></i>
      </span>
    </a>
    <ul class="treeview-menu" *ngFor="let cm of childMenu">
      <li *ngIf="cm.ParentMenuId == pm.Id">{{cm.MenuTitle}}</li>
    </ul>
  </li>

Я получаю только первый элемент childMenu, мое понимание было * ng для работ, аналогичных foreach в C#, но ясно, что это не так. Может ли кто-нибудь помочь мне исправить код и понять его?

Answer 1

Вы правы, что ngFor ведет себя как цикл foreach или for.

Я подозреваю, что ваша проблема - это объект, к которому вы привязаны.

используя в основном ваш код, в компоненте parentItem должно быть свойство, представляющее собой массив с вложенными свойствами, включая childMenu

parentMenu = {
    'Parent1':[{'menuTitle':'Menu 1', 'childItem':[
      {'menuTitle':'sub item 1'}]
      },
     {'menuTitle':'A cool menu', 'childItem':[
       {'menuTitle':'sub item 1'},
     {'menuTitle': 'sub item 2'}]
     }]
  }

и тогда ваш HTML должен работать так:

<li class="treeview" *ngFor="let pm of parentMenu.Parent1">

    <a href="#">
      <i class="fa fa-edit"></i> <span>{{pm.menuTitle}}</span>
      <span class="pull-right-container">
        <i class="fa fa-angle-left pull-right"></i>
      </span>
    </a>
    <ul class="treeview-menu" *ngFor="let cm of pm.childItem">
      <li>{{cm.menuTitle}}</li>
    </ul>
  </li>

И для справки в действии рабочий стек-блиц из вашего кода:

Answer 2

Я не знаю содержание вашего .ts файл, но ваш код работает нормально для меня здесь:

https://stackblitz.com/edit/angular-sduuwm

Обратите внимание, что я определил свои массивы так:

  parentMenu = [
    {
      Id: 1,
      MenuTitle: "One",
    },
    {
      Id: 2,
      MenuTitle: "Two",
    },
    {
      Id: 3,
      MenuTitle: "Three",
    }
  ];

  childMenu = [
    { 
      ParentMenuId: 1,
      MenuTitle: "One quarter"
    },
    {
      ParentMenuId: 1,
      MenuTitle: "One half"
    },
    {
      ParentMenuId: 2,
      MenuTitle: "Two half"
    },
    {
      ParentMenuId: 3,
      MenuTitle: "Three half"
    }
  ];

Однако, несмотря на это, на вашем месте я бы лучше определил свои массивы следующим образом:

  parentMenu = [
    {
      Id: 1,
      MenuTitle: "One",
      childMenu: [
        { MenuTitle: "One quarter" },
        { MenuTitle: "One half" },
      ]
    },
    {
      Id: 2,
      MenuTitle: "Two",
      childMenu: [
        { MenuTitle: "Two half" },
      ]
    },
    {
      Id: 3,
      MenuTitle: "Three",
      childMenu: [
        { MenuTitle: "Three half" },
      ]
    }
  ];

и сделайте HTML так:

<a href="#">
  <i class="fa fa-edit"></i> <span>{{pm.MenuTitle}}</span>
  <span class="pull-right-container">
    <i class="fa fa-angle-left pull-right"></i>
  </span>
</a>
<ul class="treeview-menu" *ngFor="let cm of pm.childMenu">
  <li>{{cm.MenuTitle}}</li>
</ul>

И вам не понадобится *ngIf проверить в своем коде.

Answer 3

Попробуй этот код

 <ul class="treeview-menu" *ngFor="let cm of pm.childMenu">
      <li *ngIf="cm.ParentMenuId == pm.Id">{{cm.MenuTitle}}</li>
    </ul>

Answer 4

<ul>    
          <ng-template #recursiveMenu let-parentMenu>
             <li class="treeview" *ngFor="let pm of parentMenu">
               <a href="#">
                 <i class="fa fa-edit"></i> <span>{{pm.MenuTitle}}</span>
                 <span class="pull-right-container">
                   <i class="fa fa-angle-left pull-right"></i>
                  </span>
               </a>
               <ul class="treeview-menu">
                 <ng-container *ngTemplateOutlet="recursiveMenu; context:{ 
                   $implicit: pm.childMenu}">
                 </ng-container>
               </ul>
             </li>
          </ng-template>
          <ng-container *ngTemplateOutlet="recursiveMenu; context:{ 
            $implicit: parentMenu}">
          </ng-container>
</ul>

Answer 5

Вы можете получить рекурсивное меню, используя шаблон, контейнеры или рекурсивный вызов компонента. Есть разные подходы, которым вы можете следовать.

Навигационное меню Angular2 с рекурсивными шаблонами

Рекурсия в угловых компонентах

Angular *ng Для шаблона дерева рекурсивных списков