Question

我的ts文件中包含以下数组：

public pages: Page[] = [
    { name: 'Smart ', link: '/smart', icon: 'crop_landscape', id: 'markRectangle'},
    { name: 'Shop', link: '/options', icon: 'crop_landscape', id: 'markRectangle'},

  ];

我正在使用* ngFor在侧面导航中渲染此数组：

<mat-nav-list>
        <a mat-list-item *ngFor="let page of pages" [routerLink]='[page.link]'>
          <button mat-icon-button id="{{page.id}}"  (click)="rightNavOpen(true,page?.name)">
          <mat-icon style="padding-right:5px;">{{page?.icon}}</mat-icon>
          <span id="shapeName" [@animateText]="linkText ? 'show' : 'hide'">{{ page?.name }} </span></button>
        </a>          


        </mat-nav-list>

我的要求是在“商店”选项卡下，我想向节目显示更多子菜单。如果我在“页面”数组下添加一些内容，这是可能的。

Answer 1

我很少更新您的html代码。之前您已经遍历了anchor（），所以我们无法在其中创建子对象，因为它将使所有具有相同链接的元素都可单击，然后在其中添加了一个子对象。

public pages: Page[] = [
{
  name: 'Smart ',
  link: '/smart',
  icon: 'crop_landscape',
  id: 'markRectangle',
  children: [
    {
      name: 'Show More',
      link: '/smart',
      icon: 'crop_landscape',
      id: 'markRectangle',
      children: [

      ]
    }
  ]
},
{
  name: 'Shop',
  link: '/options',
  icon: 'crop_landscape',
  id: 'markRectangle'
},

];

<mat-nav-list>
  <mat-list-item *ngFor="let page of pages" >
     <a matLine [routerLink]='[page.link]'>{{ link }}</a>
     <button mat-icon-button id="{{page.id}}"  (click)="rightNavOpen(true,page?.name)">
      <mat-icon style="padding-right:5px;">{{page?.icon}}</mat-icon>
      <span id="shapeName" [@animateText]="linkText ? 'show' : 'hide'">{{ page?.name }} </span>
     </button>

     <mat-list-item *ngFor="let child of page.children" >
        <a matLine [routerLink]='[child.link]'>{{ link }}</a>
        <button mat-icon-button id="{{child.id}}"  (click)="rightNavOpen(true,child?.name)">
         <mat-icon style="padding-right:5px;">{{child?.icon}}</mat-icon>
         <span id="shapeName" [@animateText]="linkText ? 'show' : 'hide'">{{ child?.name }} </span>
        </button>
     </mat-list-item>
  </mat-list-item>
</mat-nav-list>

如何在侧面导航的菜单下创建子菜单？

1 个答案: