Angular：如何访问 JSON 的 parent 和 child 以显示面包屑

Question

我想做一些类似的事情，如果任何子孩子有任何像 'Group' 这样的数组，然后在面包屑中显示所有 parent。我是 angular 的新人。我无法建立逻辑我该怎么做。为此，我无法提供代码。

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 中使用 *ngIf 和 *ngFor 结构指令，假设这个 json 将被命名为 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>

你应该有一个方法来判断这是否是你的组件中有数据的最低步骤：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'menu',
  templateUrl: './menu.component.html'
})
export class MenuComponent  {
  @Input() menu: Array<any>;
  @Input() isRoot: boolean;

  isDeepestStep(item: any): boolean {
    return !(item.sublevel && item.sublevel.length > 0);
  }
}

工作stackblitz example

PS。我相信它可以更加简化，但我匆忙想出了这样的解决方案

Angular：如何访问 JSON 的 parent 和 child 以显示面包屑

Angular: How to access parent and child of JSON for showing breadcrumb

angular

angular7