Javascript 在角材质手风琴中打开第一个连接的扩展面板

显然，您可以使用角度材质扩展面板上的输入

expanded

，默认在加载时打开特定面板。但是，我有一个手风琴，其中所有的扩展面板都是动态生成的，并且都是可选的，但是我希望第一个面板被打开

---

我可以浏览我的

ngFor

s中使用模板生成面板的每一个，看看它是否存在，然后在第一个索引上添加属性，但是有几个循环拉入模板，看起来很混乱。在视图完成后，我希望能够从

mat accordion

中获取一些属性，以查看哪个是第一个附加到accordion的属性，并添加属性，但这似乎是不可能的。有人知道是否有办法做到这一点吗？

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

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

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

---

您可以先使用

变量，我做了一个stackblitz，您可以看到

您可以这样做：

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

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


{{item}}
{{item}}

您可以查看
*ngFor
变量的用法以了解更多信息。
好的一点是，我忘记了isFirst，打算使用索引，但这仍然意味着我必须进行不必要的if检查，因为正如我提到的，有多个ngFor，它们都是可选的，因此，我无法知道哪些将首先出现在DOM中。这就是为什么我希望找到一种直接从手风琴组件中获取面板的方法。我想那是不可能的。谢谢你的意见！感谢您的输入，请参阅上面的评论。因此，您有一个mat手风琴，里面有一些*ngFor应用于mat扩展面板。是这样吗？（1 accordion和inside X mat扩展面板）我知道，我想的另一个选择是，您可以创建一个自定义指令，并使用ngFor在mat扩展面板中使用它。在该指令中，您可以使用静态计数器，并在呈现计数器时将计数器设置为++，因此，当该计数器是第一个计数器时，扩展属性将设置为true。。。如果可以的话，我会给大家举个例子。我来看看这是怎么回事。谢谢您可以使用静态类在计数器内部创建，并在指令中导入它（它将使用它进行求和），还可以在组件中导入（在模板中使用它）。我希望解决您的问题，如果您有问题，请再次注释！；）