Angular 6 mat-nav-list with mat-expansion-panel

Question

我正在尝试创建一个 mat-nav-list，其中包含 mat-expansion-panels 作为列表项。问题是，mat-nav-list 不起作用，因为 expected.The 对齐方式一团糟，扩展面板无法正常工作。正如我所想，发生这种情况是因为 mat-nav-lists 不支持 mat-expansion-panels 作为列表项。（如果我错了请纠正我）

我的html代码如下

<mat-nav-list>
    <mat-list-item>
    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-panel-title>
          Personal data
        </mat-panel-title>
        <mat-panel-description>
          Type your name and age
        </mat-panel-description>
      </mat-expansion-panel-header>
      <mat-form-field>
        <input matInput placeholder="First name">
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Age">
      </mat-form-field>
    </mat-expansion-panel>
  </mat-list-item>

  <mat-list-item>
    <mat-expansion-panel (opened)="panelOpenState = true"
                         (closed)="panelOpenState = false">
      <mat-expansion-panel-header>
        <mat-panel-title>
          Self aware panel
        </mat-panel-title>
        <mat-panel-description>
          Currently I am {{panelOpenState ? 'open' : 'closed'}}
        </mat-panel-description>
      </mat-expansion-panel-header>
      <p>I'm visible because I am open</p>
    </mat-expansion-panel>
  </mat-list-item>
</mat-nav-list>

如果有人能提供解决此问题的方法，我将不胜感激。

Answer 1

除了使用 mat-list-item 之外，您还可以在 for 循环上使用 div 进行迭代，这样您就可以同样添加扩展面板

<div *ngFor="let hero of herolist">
   <mat-expansion-panel>
    // here you can do whateever you want
   </mat-expansion-panel>
</div>

如果你想用sidenav来实现，你可以拥有

<ng-container>
    <mat-side-nav>
    </mat-side-nav>
</ng-container>

Answer 2

也许您想将扩展面板嵌套在手风琴垫中？

<mat-accordion>
  <mat-expansion-panel></mat-expansion-panel>
  <mat-expansion-panel></mat-expansion-panel>
</mat-accordion>

https://material.angular.io/components/expansion/overview#accordion

Angular 6 mat-nav-list with mat-expansion-panel

Angular 6 mat-nav-list with mat-expansion-panel

angular

angular-material

angular6

angular-material2

angular-material-6