Question

我想做些类似的事情，如果任何子子对象具有“ Group”之类的任何数组，则在面包屑中显示所有父对象。我是新手。我无法建立逻辑该怎么做。为此，我无法提供代码。

JSON：

[{
    "ID": "01",
    "Name": "Level 1",
    "parentId": null,
    "sublevel": [{
      "ID": "01-01",
      "Name": "Level 1-1",
      "parentId": "01",
      "sublevel": [{
        "ID": "01-01-01",
        "Name": "Level 1-1-1",
        "parentId": "01-01",
        "sublevel": [],
        "Groups": [{
          "GroupID": "1",
          "GroupName": "group 1",
          "assigned": true
        }]
      }]
    }]
  },
  {
    "ID": "02",
    "Name": "Level 2",
    "parentId": null,
    "sublevel": [{
      "ID": "02-01",
      "Name": "Level 2-1",
      "parentId": "02",
      "sublevel": [],
      "Groups": [{
        "GroupID": "2",
        "GroupName": "group 2",
        "assigned": true
      }]
    }]
  },
  {
    "ID": "03",
    "Name": "Level 3",
    "parentId": null,
    "sublevel": []
  }
]

想做这样的事情：

Answer 1

这听起来像是递归组件，应该在您的html中使用old_date和*ngIf结构指令，比如说这个json将被命名为*ngFor

menuItems: Array<any>

您应该有一个方法，该方法可以判断这是否是在组件中包含数据的最低步骤：

<div *ngIf="menu">
<span *ngFor="let item of menu">
  <span *ngIf="!isDeepestStep(item)">
    {{  
        isRoot 
        ? item.Name 
        : ' > '  + item.Name 
    }}
    <span *ngFor="let subItem of item.sublevel">
        <span *ngIf="isDeepestStep(subItem)">
          {{ ' > ' + subItem.Name }}
          <span *ngFor="let group of subItem.Groups">
            [boxed] {{ group.GroupName }}
          </span>
        </span>
        <span *ngIf="!isDeepestStep(subItem)">
          {{ ' > ' + subItem.Name }} 
          <menu [isRoot]="false" [menu]="subItem.sublevel"></menu>
        </span>
    </span> 
  </span>
  <span *ngIf="isDeepestStep(item)">
    {{ item.Name }}
    <span *ngFor="let group of item.Groups">
      [boxed] {{ group.GroupName }}
    </span>
  </span>
</span>

工作stackblitz example

PS。我相信它甚至可以进一步简化，但是我急着想出了这样的解决方案

Angular：如何访问JSON的父级和子级以显示面包屑

1 个答案: