在 Angular Material 手风琴中打开第一个附加的扩展面板

Question

显然，您可以在 Angular Material 扩展面板上使用输入 expanded 来默认在加载时打开特定面板。但是，我有一个手风琴，其中所有扩展面板都是动态生成的，并且都是可选的，但我希望打开第一个面板。

我可以检查每个使用模板生成面板的 ngFors 以查看它是否存在，然后在第一个索引上添加属性，但是有几个循环会引入模板和看起来很乱。我希望能够在视图完成后从 mat-accordion 中获取一些属性以查看哪个是附加到手风琴的第一个并添加属性，但看起来它不是可能的。任何人都知道是否有某种方法可以做到这一点？

Answer 1

您是否尝试过使用 ngFor "first" 局部变量？这样：

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

Answer 2

你可以使用first变量，我做了一个stackblitz，你可以看到here。

你可以这样做：

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

您可以查看 here *ngFor 变量的使用以获取更多信息。

Answer 3

....
<mat-accordion [formGroupName]="blockIndex"   multi>
  <mat-expansion-panel [expanded]="blockIndex==0" >
....

在 angular (+2)

中使用反应式数组时默认打开第一个面板

在 Angular Material 手风琴中打开第一个附加的扩展面板

Open the first attached expansion panel in an Angular Material accordion

html

javascript

accordion

angular-material

angular