Angular 6 mat-nav-list,带有垫子扩展面板

问题描述 投票:1回答:1

我正在尝试创建一个mat-nav-list,其中mat-expansion-panels作为列表项。问题是,mat-nav-list无法按预期工作。对齐很乱,扩展面板无法正常工作。我认为,这是因为mat-nav-lists不支持mat-expansion-panels作为列表项。(如果我错了,请纠正我)enter image description here

我的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>

如果有人能为我提供解决这个问题的方法,我将感激不尽。

angular angular-material angular6 angular-material2 angular-material-6
1个回答
1
投票

您可以迭代使用mat-list-item而不是使用mat-list-item,并且可以同样添加扩展面板

<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>

推荐问答