Question

我正在使用Angular7 * ngFor渲染带有子菜单的菜单，但出现了渲染2D数组的问题。我的json数据是这样的：

{
    "items": [
      {
        "id": 1,
        "name" : "Talent",
        "color" : "",
        "subItems" : [],
        "icon" : ""
      },
      {
        "id": 2,
        "name": "Connections",
        "color" : "",
        "isActivated" : false,
        "subItems" : [
            {
                "id" : 1,
                "name": "Pipelines",
                "color": "",
                "subItems" :[],
                "icon" : "fa fa-caret-down"
            },
            {
                "id" : 2,
                "name": "Requisition",
                "color": "",
                "subItems" :[],
                "icon" : ""
            },
            {
                "id" : 3,
                "name": "Projects",
                "color": "",
                "subItems" :[],
                "icon" : ""
            }
        ],
        "icon" : ""
      },
      {
        "id": 3,
        "name": "Intelligence",
        "color" : "",
        "isActivated" : false,
        "subItems" : [
            {
                "id" : 1,
                "name": "Companies",
                "color": "",
                "subItems" :[],
                "icon" : "fa fa-caret-down"
            },
            {
                "id" : 2,
                "name": "Schools",
                "color": "",
                "subItems" :[],
                "icon" : ""
            }
        ],
        "icon" : ""
      },
     ...
}

我要创建的菜单栏，其结构非常像这样：

https://codepen.io/marong125/pen/wOZgGz

我已经重新整理数据并存储在2D数组子项中，如下所示：

(2) [Array(3), Array(2)]
0: Array(3)
0: {id: 1, name: "Pipelines", color: "", subItems: Array(0), icon: "fa fa-caret-down"}
1: {id: 2, name: "Requisition", color: "", subItems: Array(0), icon: ""}
2: {id: 3, name: "Projects", color: "", subItems: Array(0), icon: ""}
length: 3
__proto__: Array(0)
1: Array(2)
0: {id: 1, name: "Companies", color: "", subItems: Array(0), icon: "fa fa-caret-down"}
1: {id: 2, name: "Schools", color: "", subItems: Array(0), icon: ""}
length: 2

我已经创建了导航部分，但是子菜单部分不能很好地工作。当我这样做时：

  <nav>
      <ul>
        <li class="sub-menu" *ngFor="let navItem of navItems" (click)="expand(navItem.name, $event.target)">
                <a href="#">{{navItem.name}}<span id="upDownIcons"><i *ngIf="navItem.subItems.length !== 0" [ngClass]="navIcons?.arrowDown" aria-hidden="true"></i></span></a>
          <ul>
            <ng-container *ngFor="let subItem of subItems; let i = index">
                <ng-container *ngFor="let item of subItem; let j = index">
                    <li ><a href="#">{{item.name}}</a></li>
                </ng-container>
            </ng-container>
          </ul>
        </li>
      </ul>
    </nav>

它呈现如下：（为每个菜单项提供相同的子菜单）：

有人能更好地解决2D阵列问题吗？非常感谢！

Answer 1

您应该遍历subItems的{{1}}数组，并遍历navItem的数组。

subItem

Answer 2

遍历您的navItems并使用其index遍历其subItems

<nav>
  <ul>
    <li class="sub-menu" *ngFor="let navItem of navItems;let i = index" (click)="expand(navItem.name, $event.target)">
            <a href="#">{{navItem.name}}<span id="upDownIcons"><i *ngIf="navItem.subItems.length !== 0" [ngClass]="navIcons?.arrowDown" aria-hidden="true"></i></span></a>
      <ul>
        <ng-container *ngFor="let subItem of subItems[i]; let j = index">

                <li ><a href="#">{{item.name}}</a></li>

        </ng-container>
      </ul>
    </li>
  </ul>
</nav>

如何使用* ngFor渲染二维数组

2 个答案: