Angular折叠菜单开发遇TS2339错误：sublinks属性不存在

报错信息 #

Error: src/app/components/header/header.component.html:48:49 - error
TS2339: Property 'sublinks' does not exist on type '{ title: string; collapsed: boolean; links: { title: string; url: string; sublinks: { title: string; url: string; }[]; }[]; }'.
48 <li *ngFor="let sublink of item.sublinks" class="sublink">

问题原因 #

核心问题是HTML模板循环层级错误。从TS代码的navigationItems结构来看，顶级item并没有直接的sublinks属性，sublinks是嵌套在item.links数组的子元素中的。模板里直接遍历item.sublinks，TypeScript会判定该属性不存在，从而抛出错误。同时原模板中<a [href]="item.url"也是错误的，因为顶级item没有url属性。

修复方案 #

修正后的HTML模板 #

<li *ngFor="let item of navigationItems; let i = index" class="link">
  <a class="main-wrapper">{{ item.title }}</a>
  <a class="d-inline-block main-wrapper" (click)="toggleCollapse(i)" role="button" [attr.aria-expanded]="!item.collapsed" [attr.aria-controls]="'navCollapse_' + i">
    <img *ngIf="item.collapsed" src="./assets/img/icons/plus.svg" alt="plus-icon" class="ms-3">
    <img *ngIf="!item.collapsed" src="./assets/img/icons/minus.svg" alt="minus-icon" class="ms-3">
  </a>
  <div [id]="'navCollapse_' + i" class="collapse link-collapse main-collapse" [class.show]="!item.collapsed">
    <!-- 先遍历item下的links数组 -->
    <ul class="sublink-wrapper" *ngFor="let link of item.links">
      <li class="link-title">
        <a [href]="link.url">{{ link.title }}</a>
      </li>
      <!-- 再遍历当前link下的sublinks -->
      <li *ngFor="let sublink of link.sublinks" class="sublink">
        <a [href]="sublink.url">{{ sublink.title }}</a>
      </li>
    </ul>
  </div>
</li>

类型优化建议（可选） #

为了避免后续出现类似类型错误，建议在TS中定义明确的接口类型，让数据结构更清晰：

// 定义子链接类型
interface NavSublink {
  title: string;
  url: string;
}

// 定义二级链接类型
interface NavLink {
  title: string;
  url: string;
  sublinks: NavSublink[];
}

// 定义顶级导航项类型
interface NavItem {
  title: string;
  collapsed: boolean;
  links: NavLink[];
}

export class HeaderComponent {
  constructor() { }

  navigationState: string = 'out';
  
  // 指定navigationItems的类型为NavItem数组
  navigationItems: NavItem[] = [
    {
      title: 'Lorem ipsum',
      collapsed: true,
      links: [
        {
          title: 'Lorem ipsum 1',
          url: 'some-url',
          sublinks: [
            { title: 'Lorem ispum 1.1', url: 'some url' },
            { title: 'Lorem ispum 1.2', url: 'some url' },
            { title: 'Lorem ispum 1.3', url: 'some url' }
          ]
        },
        {
          title: 'Lorem ipsum 2',
          url: 'some-url',
          sublinks: [
            { title: 'Lorem ispum 2.1', url: 'some url' },
            { title: 'Lorem ispum 2.2', url: 'some url' },
            { title: 'Lorem ispum 2.3', url: 'some url' },
            { title: 'Lorem ispum 2.4', url: 'some url' }
          ]
        },
        {
          title: 'Lorem ipsum 3',
          url: 'some-url',
          sublinks: [
            { title: 'Lorem ispum 3.1', url: 'some url' },
            { title: 'Lorem ispum 3.2', url: 'some url' },
            { title: 'Lorem ispum 3.3', url: 'some url' }
          ]
        },
        {
          title: 'Lorem ipsum 4',
          url: 'some-url',
          sublinks: [
            { title: 'Lorem ispum 4.1', url: 'some url' },
            { title: 'Lorem ispum 4.2', url: 'some url' },
            { title: 'Lorem ispum 4.3', url: 'some url' },
            { title: 'Lorem ispum 4.4', url: 'some url' },
            { title: 'Lorem ispum 4.5', url: 'some url' }
          ]
        },
      ]
    }
  ];

  ngOnInit(): void {
  }

  toggleCollapse(index: number): void {
    this.navigationItems[index].collapsed = !this.navigationItems[index].collapsed;
  }
}

内容的提问来源于stack exchange，提问作者weinde