создать вложенное выпадающее меню родительских дочерних данных - PullRequest
Новая
       86

создать вложенное выпадающее меню родительских дочерних данных

0 голосов
/ 28 сентября 2019

Я хочу сгенерировать вложенные элементы для моего раскрывающегося списка на основе полученных данных от API со структурой parent-child.У меня есть форма для создания пользователя, и в этой форме у меня есть раскрывающийся список, что его данные об организационных единицах, которые имеют отношения родитель-потомок для каждого ou.Мой админ запутывает, когда он хочет создать пользователя из-за шоу ou в линейном режиме и хочет показать это в виде вложенных файлов. Можете ли вы мне помочь?моя структура данных: 

export class DisplayOu {
    id: number;
    parentId: number;
    name: string;
    cssClass: string;
    imageUrl: string;
    designation: number;
    subordinates: DisplayOu[] = []
}

1 Ответ

0 голосов
/ 28 сентября 2019

Я исправил проблему из того, что проанализировал по вашей проблеме.Я заметил, что вы создаете объект массива DisplayOu в том же классе.Я исправил использование другого интерфейса для родительского меню и подменю, например: 

interface  MainMenu {
   id: number;
   parentId: number;
   name: string;
   cssClass: string;
   imageUrl: string;
   designation: number;
   subMenus:SubMenu[];
}
interface  SubMenu {
   id: number;
   parentId: number;
   name: string;
   cssClass: string;
   imageUrl: string;
   designation: number;
}

Для получения данных я создал объект const (в вашем случае это результат API), например: 

    const menu: MainMenu[] = [
      {
        id: 1,
        cssClass: "foo",
        designation: 3,
        imageUrl: "",
        name: "John",
        parentId: 1,
        subMenus: [
          {
            id: 2,
            cssClass: "foo",
            designation: 3,
            imageUrl: "",
            name: "Loream Ipsum 1",
            parentId: 1
          },
          {
            id: 3,
            cssClass: "foo",
            designation: 3,
            imageUrl: "",
            name: "Loream Ipsum 2",
            parentId: 1
          },
          {
            id: 4,
            cssClass: "foo",
            designation: 3,
            imageUrl: "",
            name: "Loream Ipsum 3 ",
            parentId: 1
          },
          {
            id: 5,
            cssClass: "foo",
            designation: 3,
            imageUrl: "",
            name: "Loream Ipsum 4",
            parentId: 1
          }
        ]
      },
      {
        id: 6,
        cssClass: "foo",
        designation: 3,
        imageUrl: "",
        name: "Andy",
        parentId: 1,
        subMenus: [
          {
            id: 7,
            cssClass: "foo",
            designation: 3,
            imageUrl: "",
            name: "Loream Ipsum 5",
            parentId: 1
          },
          {
            id: 8,
            cssClass: "foo",
            designation: 3,
            imageUrl: "",
            name: "Loream Ipsum 6",
            parentId: 1
          },
          {
            id: 9,
            cssClass: "foo",
            designation: 3,
            imageUrl: "",
            name: "Loream Ipsum 7",
            parentId: 1
          },
          {
            id: 10,
            cssClass: "foo",
            designation: 3,
            imageUrl: "",
            name: "Loream Ipsum 8",
            parentId: 1
          }
        ]
      }
    ];

И инициализируется в компоненте следующим образом: 

  menuItem: MainMenu[];
  constructor() {
    this.menuItem = menu;
    console.log(this.menuItem);
  }

Затем в html просто отображается так: 

    <ul class="navbar-nav mr-auto">
        <li class="nav-item dropdown" dropdown *ngFor="let menu of menuItem">
            <a class="nav-link dropdown-toggle" href (click)="false" id="navbarDropdown" role="button" aria-controls="navbarDropdown" dropdownToggle>
                {{menu.name}} <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown" *dropdownMenu role="menu" aria-labelledby="navbarDropdown">
                <li *ngFor="let subMenu of menu.subMenus">
                    <a class="dropdown-item" href="#">{{subMenu.name}}</a>
                </li>
            </ul>
        </li>
    </ul>

Рабочая демонстрация stackblitz находится здесь .Я надеюсь, что это поможет вам.

...