Question

我想使用角矩阵设计渲染多级导航。

下面是示例导航数据，

navData=[{url:"/index",description:"Main Nav 1",children:[{url:"/index",description:"Sub Child 1"},{url:"/index",description:"Sub Child 2"},{url:"/index",description:"Sub Child 3"},{url:"/index",description:"Sub child 4",children:[{url:"/index",description:"Child 1 of Sub Child 4"}]},{url:"/index",description:"Sub Child 5",children:[{url:"/index",description:"Child 1 of Sub Child 5"}]},{url:"/index",description:"Sub Child 6"}]}];

在示例数据中，它为3级。

当前，我正在显示第一级导航。

如何显示它的子导航。请帮忙。

我的StackBlitz链接https://stackblitz.com/edit/angular-xszcga?file=app/sidenav-overview-example.html

我的HTML代码，

<mat-sidenav-container class="example-container">
    <mat-sidenav mode="side" opened>
        <mat-nav-list>
            <mat-list-item *ngFor="let nav of navData">
                {{nav.description}}
            </mat-list-item>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>Main content</mat-sidenav-content>
</mat-sidenav-container>

Answer 1

您可以使用ng-template使用mat-nav-list来嵌套[ngForOf]，方法是访问导航上级的children属性。

<mat-sidenav-container class="example-container">
    <mat-sidenav mode="side" opened>
        <mat-nav-list>
          <ng-template ngFor let-nav [ngForOf]="navData">
            <mat-list-item (click)="toggle(nav)">
              {{nav.description}}
            </mat-list-item>
            <ng-template [ngIf]="nav.open">
              <mat-nav-list>
                <ng-template ngFor let-child [ngForOf]="nav.children">
                  <mat-list-item (click)="toggle(child)">
                    {{child.description}}
                  </mat-list-item>
                  <ng-template [ngIf]="child.open">
                    <mat-nav-list>
                      <mat-list-item *ngFor="let child2 of child.children">
                        {{child2.description}}
                      </mat-list-item>
                    </mat-nav-list>
                  </ng-template>
                </ng-template>
              </mat-nav-list>
            </ng-template>
          </ng-template>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>Main content</mat-sidenav-content>
</mat-sidenav-container>

并在您的TS文件的组件内添加toggle = nav => nav.open = !nav.open;

垫项目导航中未显示Chid项目

1 个答案: