Блог

Главная - Вопросы по программированию - Навигационный список Angular 6 с панелью расширения mat-Переполнение стека

Навигационный список Angular 6 с панелью расширения mat-Переполнение стека

#angular #angular-material #angular6 #angular-material2 #angular-material-6

#angular #angular-материал #angular6 #angular-material2 #angular-материал-6

Вопрос:

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

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

Комментарии:

1. похоже, проблема css не в angular?

2. Вы пытаетесь отобразить расширяемые боковые навигационные ссылки? stackblitz.com/edit/material-sidenav-example-ldqs1x

Ответ №1:

Вместо использования mat-list-item у вас может быть 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>

Ответ №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