从 Angular 2 理解 *ngFor

Question

我正在尝试在我的 Angular 项目中使用嵌套的 *ngFor 来呈现动态菜单。我正在尝试这样的事情：

<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 的第一个元素，我的理解是 *ngFor 的工作方式类似于 C# 中的 foreach，但很明显，事实并非如此。有人可以帮我修复代码并理解它吗？

Answer 1

试试这个代码

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

Answer 2

您可以通过使用模板、容器或组件的递归调用来实现递归菜单。您可以采用不同的方法。

Angular2 Navigation Menu with Recursive Templates

Recursion in Angular Components

Angular *ngFor recursive list tree template

Answer 3

我不知道你的 .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 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

你说得对，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>

对于reference in action a working stackblitz from your code:

从 Angular 2 理解 *ngFor

Understanding *ngFor from Angular 2

angular

angular2-directives

ngfor

angular-ng-if