Угловой 6 мат-нав-лист с мат-расширительной панелью - PullRequest
Новая
       31

Угловой 6 мат-нав-лист с мат-расширительной панелью

1 голос
/ 13 марта 2019

Я пытаюсь создать список mat-nav-list, в котором в качестве элементов списка используются панели расширения матов.Проблема в том, что mat-nav-list не работает должным образом. Выравнивания беспорядочные, а панели расширения не работают должным образом.Как я думаю, это происходит потому, что списки mat-nav не поддерживают панели расширения mat как элементы списка (исправьте меня, если я ошибаюсь) 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>

Я буду благодарен, если кто-нибудь может предоставить мне способ решения этой проблемы.

1 Ответ

1 голос
/ 13 марта 2019

Вместо использования mat-list-item вы можете использовать div для цикла loop, и таким образом вы можете добавить панель расширения аналогичным образом 

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