Динамически отображаемая панель расширения не работает, как задумано - PullRequest
Новая
       9

Динамически отображаемая панель расширения не работает, как задумано

0 голосов
/ 15 октября 2018

Мне нужно динамически визуализировать список панелей расширения внутри аккордеона.

Разметка довольно проста: 

<mat-accordion *ngIf="currentVenue">
  <mat-expansion-panel *ngFor="let gig of currentVenue.gigs" expanded="false">
    <mat-expansion-panel-header>
      <mat-panel-title>
        {{gig.name}}
      </mat-panel-title>
      <mat-panel-description>
        Type your name and age
      </mat-panel-description>
    </mat-expansion-panel-header>

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

К сожалению, это приводит к неиспользуемому элементу управления.Заголовок не открывает панель, и вся функциональность аккордеона также нарушена.Мне нужно щелкнуть за пределами элемента управления, а затем случайным образом он открывает одну дочернюю панель расширения (или нет).

Если я, в свою очередь, использую «статический» подход (я скопировал это из кода примеров), всеработает как задумано: 

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

Я предполагаю, что это связано с *ngIf и способом создания элементов управления.

Я использую угловой материал 6.4.7 и угловой 6.1.10

1 Ответ

0 голосов
/ 15 октября 2018

Вы правы в том, что *ngIf делает здесь некоторые забавные вещи.Это структурная директива, поэтому на низком уровне Angular отображает ее не так, как другие компоненты.Этот рендеринг может мешать другим структурным директивам, поэтому Angular позволяет привязывать шаблон только к одной структурной директиве за раз.

Но хорошие новости!Звездочка в названии - просто синтаксический сахар для того, что действительно делают структурные директивы.Если мы удалим сахар с имени и свяжем его с шаблоном явно , охватывая сам аккордеон, Angular сможет визуализировать вложенные директивы с этим контекстом шаблона вместо использования шаблона компонента: 

  <ng-template [ngIf]="currentVenue">
    <mat-accordion>
      <mat-expansion-panel *ngFor="let gig of currentVenue.gigs" expanded="false">
        <mat-expansion-panel-header>
          <mat-panel-title>
            {{gig.name}}
          </mat-panel-title>
          <mat-panel-description>
            Type your name and age
          </mat-panel-description>
        </mat-expansion-panel-header>

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

Обратите внимание, что ngIf теперь связан как обычная директива.Это можно использовать только для тегов ng-template.Без звездочки Angular не будет пытаться привязать к нему другой шаблон, и вложенные директивы будут работать.

Мы могли бы также дать повторяющимся элементам свои собственные директивы ng-template и ngForOf, но синтаксис с[ngIf] намного чище.

...