垫子导航中未显示儿童项目答案

【问题标题】：Chid items not displaying in mat navigation垫子导航中未显示儿童项目
【发布时间】：2019-07-29 18:54:57
【问题描述】：

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

以下是导航数据示例，

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>

【问题讨论】：

标签： angular typescript angular-material

【解决方案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;

【讨论】：

它工作正常，但不是我想要的方式。我想要一个树视图，如果我单击主导航，它应该显示孩子，并且同样适用于子孩子。有什么想法吗？
为每个项目添加一个属性open，然后在<ng-template ngFor let-child [ngForOf]="nav.children"> 周围添加一个<ng-template [ngIf]="nav.open">，并在点击事件<mat-list-item (click)="toggle(nav)"> 上添加一个开关，实现为toggle = (item) => item.open = !item.open。这应该会给你你正在寻找的东西。
我试过这样<mat-list-item> <button ariaControls="nav-list-{{i}}">{{nav.description}}</button> </mat-list-item>
但是 {{i}} 不相关，所以孩子们没有进入父母
ariaControl 不能控制其他元素，它仅用于链接元素并为有视力助手的人指示它们的关系。我更新了答案以添加您想要的更改。