web-dev-qa-db-fra.com

Ouvrez le premier panneau d'extension attaché dans un Angular Material accordéon

De toute évidence, vous pouvez utiliser l'entrée expanded sur un panneau d'extension Angular Material par défaut pour ouvrir un panneau particulier lors du chargement. Cependant, j'ai un accordéon où tous les panneaux d'extension sont générés dynamiquement, et tous sont facultatifs, mais je voudrais que le premier panneau soit ouvert.

Je pourrais parcourir chacun de mes ngFor qui utilisent des modèles pour générer les panneaux pour voir s'il existe et puis sur le premier index ajouter l'attribut, mais il y a plusieurs boucles qui tirent dans les modèles et cela semble désordonné. Je voudrais pouvoir récupérer une propriété du mat-accordion une fois la vue terminée pour voir lequel est le premier attaché à l'accordéon et ajouter l'attribut, mais il semble que ce ne soit pas possible. Quelqu'un sait s'il existe un moyen de le faire?

javascripthtmlangularangular-materialaccordion
9
Aaron Hazelton

Vous pouvez utiliser la variable first, j'ai fait un stackblitz, vous pouvez voir ici .

Vous pouvez faire comme ceci:

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

Vous pouvez voir ici l'utilisation du *ngFor variables pour plus d'informations.

12
Kalamarico

Avez-vous essayé d'utiliser la "première" variable locale ngFor? De cette façon:

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