Angular: Как получить доступ к родительскому и дочернему элементу JSON для отображения крошек

Question

Я хочу сделать что-то в этом роде, если у любого подчиненного есть какой-либо массив, например, «Группа», тогда показать всех родителей в сухарях.Я новичок в угловой.Я не мог построить логику, как я могу это сделать.Для этого я не могу предоставить код.

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

Это звучит как рекурсивный компонент, который должен использовать структурные директивы *ngIf и *ngFor в вашем html, скажем, этот 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

PS.Я уверен, что это может быть еще более упрощено, но в спешке я придумал такое решение