创建父子数据的嵌套下拉菜单

Question

我想根据从 API 接收到的具有父子结构的数据为我的下拉菜单生成嵌套项。 我有一个用于创建用户的表单，在这个表单中，我有下拉选择 它的数据是关于每个ou 都有父子关系的组织单位。 我的管理员在想创建用户时感到困惑，因为 ou 以线性模式显示，并想在嵌套视图中显示这些 ous 你能帮我吗？ 我的数据结构是：

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

Answer 1

我已经根据我从您的问题中分析的内容解决了这个问题。我注意到您正在同一类中创建 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 demo is here。希望对您有所帮助。