Откройте первую прикрепленную панель расширения в аккордеоне с угловым материалом

Очевидно, вы можете использовать вход, expanded на панели расширения углового материала, по умолчанию для конкретной панели, которая открывается при загрузке. Однако у меня есть аккордеон, где все панели расширения генерируются динамически, и все они являются необязательными, но я бы хотел, чтобы первая панель была открыта.

Я мог бы пройти через каждый из моих ngFor s, которые используют шаблоны для создания панелей, чтобы увидеть, существует ли он, а затем в первом индексе добавить атрибут, но есть несколько циклов, которые тянут шаблоны, и это кажется беспорядочным. Я хотел бы иметь возможность захватить некоторое свойство из mat-accordion после того, как представление завершилось, чтобы увидеть, что является первым, прикрепленным к аккордеонам, и добавить атрибут, но похоже, что это невозможно. Кто-нибудь знает, есть ли способ сделать это?

Всего 2 ответа


Вы можете использовать first переменную, я сделал stackblitz, вы можете видеть здесь .

Вы можете сделать так:

<mat-accordion class="example-headers-align">
  <mat-expansion-panel *ngFor="let item of [1,2,3]; first as isFirst" [expanded]="isFirst">
    <mat-expansion-panel-header>
      <mat-panel-title> {{item}} </mat-panel-title>
    </mat-expansion-panel-header>
    {{item}}
  </mat-expansion-panel>
</mat-accordion>

Вы можете увидеть здесь использование переменных *ngFor для получения дополнительной информации.


Вы пытались использовать локальную переменную ngFor «first»? В этом случае:

<mat-accordion>
    <mat-expansion-panel *ngFor="let elem of elements; let isFirst = first" [expanded]="isFirst">
         <!--- Something Here --->
    </mat-expansion-panel>
</mat-accordion>

Есть идеи?

10000