首页 文章

从Angular 2中理解* ngFor

提问于
浏览 次
0

我正在尝试在我的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的第一个元素，我的理解是* ng对于类似于C＃中的foreach的工作，但很明显，情况并非如此 . 有人可以帮我修复代码并理解它吗？

angular angular2-directives ngfor ngif

5 回答

  • 0

    你是正确的，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:

    回复于
  • 0

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

    回复于
  • 0

    试试这段代码

    <ul class="treeview-menu" *ngFor="let cm of pm.childMenu">
      <li *ngIf="cm.ParentMenuId == pm.Id">{{cm.MenuTitle}}</li>
    </ul>
    回复于
  • -1
    <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>
    回复于
  • 3

    您可以使用模板，容器或组件的递归调用来实现递归菜单 . 您可以遵循不同的方法 .

    Angular2 Navigation Menu with Recursive Templates

    Recursion in Angular Components

    Angular *ngFor recursive list tree template

    回复于

相关问题