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

Question

显然，您可以使用expandedAngular 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>