如何 ngFor 一个数组 object 包含一个包含 objects 的数组的键？

Question

我正在尝试遍历一个数组，该数组包含一个键和一个以 objects 作为值的数组。这是包含数组的组件

sidemenu-links.ts

import { SideMenuLink } from './sidemenu-link';

export const SIDEMENULINKS: SideMenuLink[] = [
  {
    "linkTitle": "Getting Started",
    "linkRoute": "introduction",
    "subLinks": [
      {
        "linkTitle": "Introduction",
        "linkRoute": "introduction"
      },
      {
        "linkTitle": "Download",
        "linkRoute": "download"
      },
      {
        "linkTitle": "Contents",
        "linkRoute": "contents"
      },
      {
        "linkTitle": "Browser & devices",
        "linkRoute": "browser-and-devices"
      },
      {
        "linkTitle": "JavaScript",
        "linkRoute": "javascript"
      },
      {
        "linkTitle": "Theming",
        "linkRoute": "theming"
      },
      {
        "linkTitle": "Build tools",
        "linkRoute": "build-tools"
      },
      {
        "linkTitle": "Webpack",
        "linkRoute": "webpack"
      },
      {
        "linkTitle": "Accessibility",
        "linkRoute": "accessibility"
      }
    ] 
  },
  {
    "linkTitle": "Layout",
    "linkRoute": "layout",
    "subLinks": []
  },
  {
    "linkTitle": "Content",
    "linkRoute": "content",
    "subLinks": []
  },
  {
    "linkTitle": "Components",
    "linkRoute": "components",
    "subLinks": []
  },
  {
    "linkTitle": "Utilities",
    "linkRoute": "utilities",
    "subLinks": []
  },
  {
    "linkTitle": "Extend",
    "linkRoute": "extend",
    "subLinks": []
  },
  {
    "linkTitle": "Migration",
    "linkRoute": "migration",
    "subLinks": []
  },
  {
    "linkTitle": "About",
    "linkRoute": "about",
    "subLinks": []
  },
]

这是sidemenu.component

sidemenu.component.ts

import { Component, OnInit } from '@angular/core';

import { NavLink } from '../nav-link';
import { SIDEMENULINKS } from '../sidemenu-links';

@Component({
  selector: 'app-sidemenu',
  templateUrl: './sidemenu.component.html',
  styleUrls: ['./sidemenu.component.scss']
})
export class SidemenuComponent implements OnInit {

  sideMenuLinks = SIDEMENULINKS;
  linkSelected: NavLink;

  constructor() { }

  expandLink(link:any): void {
    this.linkSelected = link;
  }

  ngOnInit() {
  }

}

这是我尝试使用 *ngFor

的 sidemenu.component.html

sidemenu.component.html

<div class="side-menu-container #sidemenucontainer">
  <ul>
    <li *ngFor="let link of sideMenuLinks">
      <div class="nav-link" [class.selected]="link === linkSelected" (click)="expandLink(link)">{{link.linkTitle}}</div>
      <div *ngIf="link === linkSelected">
        <div class="nav-link" *ngFor="let link of sideMenuLinks">{{link.subLinks.linkTitle}}</div>
      </div>
    </li>
  </ul>
</div>

当我运行它并单击它打开的任何侧边链接时，链接标题为

，但

的文本是全部空白。

Answer 1

您只需在嵌套的 *ngFor 中包含 subLinks 数组。这是使用您的对象结构和 html.

的代码的简化 StackBlitz Demo

<div class="side-menu-container #sidemenucontainer">
  <ul>
    <li *ngFor="let link of sideMenuLinks">
      <div class="nav-link" [class.selected]="link === linkSelected" (click)="expandLink(link)">{{link.linkTitle}}</div>
      <div *ngIf="link === linkSelected">
        <div class="nav-link" *ngFor="let sub of link.subLinks">{{sub.linkTitle}}</div>
      </div>
    </li>
  </ul>
</div>

如何 ngFor 一个数组 object 包含一个包含 objects 的数组的键？

How to ngFor an array with an object that contains a key with an array that contains objects?

angular2-template

angular5