Angular 12 *ngFor 显示父菜单，但不显示嵌套数组中的后续子菜单答案

【问题标题】：Angular 12 *ngFor Displays Parent Menus but don't display subsequent child menus from Nested ArrayAngular 12 *ngFor 显示父菜单，但不显示嵌套数组中的后续子菜单
【发布时间】：2021-06-10 13:04:47
【问题描述】：

这是我来自 typescript.ts 的嵌套数组结果

[
    {
        "0": {
            "menuName": "Home",
            "childs": [
                {
                    "subMenuName": "",
                    "subMenuValue": ""
                }
            ]
        },
        "2": {
            "menuName": "User",
            "childs": [
                {
                    "subMenuName": "User List",
                    "subMenuValue": "/users"
                }
            ]
        },
        "5": {
            "menuName": "ABC",
            "childs": [
                {
                    "subMenuName": "ABC Admin menu 1",
                    "subMenuValue": "/DEF/DEFreport"
                },
                {
                    "subMenuName": "Fund ",
                    "subMenuValue": "/admin/manage-sub-fund"
                },
                {
                    "subMenuName": "ABC Screen",
                    "subMenuValue": "/admin/ABC"
                }
            ]
        },
        "6": {
            "menuName": "AI",
            "childs": [
                {`enter code here`
                    "subMenuName": "AI Screen",
                    "subMenuValue": "/AI"
                }
            ]
        },
        "8": {
            "menuName": "DEF",
            "childs": [
                {
                    "subMenuName": "DEF Int List",
                    "subMenuValue": "/admin/DEFreport-Intdist"
                },
                {
                    "subMenuName": "DEF Ext List",
                    "subMenuValue": "/admin/DEFreport-Extdist"
                },
                {
                    "subMenuName": "DEF ISIN",
                    "subMenuValue": "/admin/DEFassign"
                },
                {
                    "subMenuName": "DEF Report",
                    "subMenuValue": "/DEF/DEFreport"
                }
            ]
        }
    }
]

这就是我尝试在 component.html 页面中访问的方式

<div *ngFor="let parent of results[0] | keyvalue" style="color: antiquewhite;" class="dropdown">
            <button type="button" class="btn dropdown-toggle" data-toggle="dropdown"
            style="color: antiquewhite;">{{parent.key}}</button>
 
            <div *ngFor="let child of parent.childs" class="dropdown-menu">
                <a class="dropdown-item" routerLink="{{child.subMenuValue}}"
                    routerLinkActive="active">{{child.subMenuName}}</a>
            </div>
</div>

我正在尝试显示数据库中的动态菜单。请纠正我，我是角度的新手。有可能，我写了错误的父子菜单属性名称。任何有关解决方案的帮助表示赞赏。

谢谢

【问题讨论】：

标签： html angular ngfor

【解决方案1】：

*ngFor 指令允许对集合进行迭代，并且您发布的不是数组（正如您所描述的那样），因此不是集合。它是一个对象，这在 javascript 中有所不同。

您可以使用 angular 的内置 KeyValuePipe，它将对象转换为键值对数组，但可以迭代对象的属性。

【讨论】：

【解决方案2】：

你可以像这样在keyvalue的帮助下做

<div *ngFor="let parent of results[0] | keyvalue" style="color: antiquewhite;" class="dropdown">
  <button type="button" class="btn dropdown-toggle" data-toggle="dropdown"
            style="color: antiquewhite;"> {{parent.value["menuName"]}}</button>

  <div *ngFor="let child of parent.value['childs']" class="dropdown-menu">
    {{child.subMenuName}}
  </div>
</div>

【讨论】：

【解决方案3】：

我发现 KeyValuePipe 的问题很少，对于正在显示的子菜单父母，我对我的对象进行了更改以成为平面数组，并在此基础上对 HTML 进行了更改以循环遍历菜单和子菜单。解决了这个问题。

【讨论】：