Aarón Hazelton
Obviamente puedes usar la entrada expanded en un panel de expansión de material angular para que un panel en particular se abra de forma predeterminada al cargar. Sin embargo, tengo un acordeón donde todos los paneles de expansión se generan dinámicamente y todos son opcionales, pero me gustaría que se abriera el primer panel.
Podría pasar por cada uno de mis ngFors que usan plantillas para generar los paneles para ver si existe y luego en el primer índice agregan el atributo, pero hay varios bucles que extraen plantillas y parece desordenado. Me gustaría poder tomar alguna propiedad de la mat-accordion después de que la vista se haya completado para ver cuál es el primero adjunto al acordeón y agregue el atributo, pero parece que no es posible. Alguien sabe si hay alguna manera de hacer esto?
Kalamarico
Puedes usar first variable, hice un stackblitz, puedes ver aquí.
Puedes hacerlo de esta manera:
<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>
Puedes ver aquí el uso de la *ngFor variable para más información.
-
Gracias por la entrada, ver comentario arriba.
– Aarón Hazelton
26 oct 2018 a las 18:07
-
Entonces, tiene 1 tapete de acordeón y dentro tiene algo de *ngFor aplicado a un panel de expansión de tapete. ¿Está bien? (1 acordeón y dentro X tapetes-paneles de expansión)
– Kalamarico
26 oct 2018 a las 18:29
-
Entiendo, otra opción que estoy pensando es que puede crear una directiva personalizada y usarla en el panel de expansión mat con ngFor. En esa directiva, puede usar un contador estático y establecer un ++ en el contador cuando se procesa, por lo tanto, el atributo expandido se establecerá en verdadero cuando ese contador sea el primero … Si puedo, mostraré un ejemplo
– Kalamarico
26 oct 2018 a las 18:49
-
Buena idea. Veré cómo ‘debe tener’ esto primero. ¡Gracias!
– Aarón Hazelton
26 oct 2018 a las 19:13
-
Puede usar una clase estática para crear dentro del contador e importarla en la directiva (y la usará para sumar) e importar también en el componente (para usarla en la plantilla) Espero resolver su problema, si tiene problemas, comenta de nuevo! 😉
– Kalamarico
26 oct 2018 a las 19:16
¿Has intentado usar la variable local ngFor “primera”? De este modo:
<mat-accordion>
<mat-expansion-panel *ngFor="let elem of elements; let isFirst = first" [expanded]="isFirst">
<!--- Something Here --->
</mat-expansion-panel>
</mat-accordion>
-
Buen punto, me olvidé de isFirst e iba a usar el índice, pero eso aún significaría que tengo que hacer comprobaciones innecesarias porque, como mencioné, hay múltiples ngFors y todos son opcionales, por lo que no tengo forma de saber cuáles. aparecerá primero en el DOM. Es por eso que esperaba encontrar una forma de obtener los paneles del componente de acordeón directamente. Supongo que eso no es posible. ¡Gracias por el aporte!
– Aarón Hazelton
26 oct 2018 a las 18:03
manjit singh
....
<mat-accordion [formGroupName]="blockIndex" multi>
<mat-expansion-panel [expanded]="blockIndex==0" >
....
Abre el primer panel de forma predeterminada cuando se trabaja con una matriz de forma reactiva en angular (+2)