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

【问题标题】：Open the first attached expansion panel in an Angular Material accordion在 Angular Material 手风琴中打开第一个附加的扩展面板
【发布时间】：2019-03-31 09:46:43
【问题描述】：

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

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

【问题讨论】：

标签： javascript html angular angular-material accordion

【解决方案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>

【讨论】：

好点，我忘记了 isFirst 并打算使用索引，但这仍然意味着我必须做不必要的 if 检查，因为正如我提到的有多个 ngFors 并且它们都是可选的，所以我无法知道哪些会首先出现在 DOM 中。这就是为什么我希望有一种方法可以直接从手风琴组件中获取面板。估计这是不可能的。感谢您的意见！

【解决方案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 变量的使用了解更多信息。

【讨论】：

感谢您的输入，请参阅上面的评论。
所以，你有 1 个 mat-accordion 并且在里面你有一些 *ngFor 应用于 mat-expansion-panel。那正确吗？（1 个手风琴和内部 X 垫扩展面板）
我明白了，我在想的另一个选择是，您可以创建一个自定义指令，并在 mat-expansion-panel 中与 ngFor 一起使用它。在该指令中，您可以使用静态计数器并在渲染时设置 ++ 计数器，因此，当该计数器是第一个时，扩展的 attr 将设置为 true...如果可以，我将展示一个示例
好主意。我会先看看这是多么“必须”。谢谢！
您可以使用静态类在计数器内部创建，并将其导入指令中（它将使用它来求和）并在组件中导入（以在模板中使用）我希望能解决你的问题，有问题再评论！ ;)

【解决方案3】：

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

在使用角度 (+2) 的反应形式数组时默认打开第一个面板

【讨论】：