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

Question

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

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

Answer 1

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

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

<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 для получения дополнительной информации.

Answer 2

Вы пытались использовать ngFor "первую" локальную переменную? Таким образом:

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