如何在Angular中使用ngFor遍历含嵌套数组对象的数组？

数据老陈

2026-5-21

在Angular中用*ngFor遍历带子菜单的侧边栏数组

我来帮你搞定这个侧边栏遍历的问题！先把组件的基础配置补全，再写模板里的遍历逻辑就行。

第一步：完善组件类（sidemenu.component.ts）

首先得确保正确导入你的菜单数组和对应类型，然后把它赋值给组件内的变量，这样模板才能访问到：

import { Component, OnInit } from '@angular/core';
import { SIDEMENULINKS } from './sidemenu-links';
import { SideMenuLink } from './sidemenu-link';

export class SidemenuComponent implements OnInit {
  // 将导入的菜单数组赋值给组件变量，供模板使用
  sideMenuLinks: SideMenuLink[] = SIDEMENULINKS;

  constructor() { }

  ngOnInit(): void {
  }
}

第二步：编写模板遍历逻辑（sidemenu.component.html）

这里需要用嵌套的*ngFor，先遍历主菜单，再针对有子菜单的项遍历它的subLinks数组，同时加个判断避免空菜单渲染多余结构：

<!-- 主菜单容器 -->
<ul class="side-menu">
  <!-- 遍历每一个一级菜单链接 -->
  <li *ngFor="let mainLink of sideMenuLinks" class="side-menu__item">
    <!-- 一级菜单的链接与标题 -->
    <a [routerLink]="[mainLink.linkRoute]" class="side-menu__link">
      {{ mainLink.linkTitle }}
    </a>

    <!-- 仅当subLinks存在且不为空时，渲染子菜单 -->
    <ul *ngIf="mainLink.subLinks && mainLink.subLinks.length > 0" class="side-menu__submenu">
      <!-- 遍历当前一级菜单下的子链接 -->
      <li *ngFor="let subLink of mainLink.subLinks" class="side-menu__subitem">
        <a [routerLink]="[subLink.linkRoute]" class="side-menu__sublink">
          {{ subLink.linkTitle }}
        </a>
      </li>
    </ul>
  </li>
</ul>