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

Question

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

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

- Aaron Hazelton

Answer 1

你可以使用first变量，我在stackblitz上做了一个示例，你可以在这里查看。

你可以按照以下方式操作：

<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变量的更多信息。

- Kalamarico

---

感谢您的输入，请查看上面的评论。 - Aaron Hazelton

这是一个相当复杂的配置对象，页面上的所有内容都是从它构建的。我这样做的原因是配置可能有很大的不同，所以我使用 ng-container 来查看对象的某个属性是否存在，如果存在，则使用另一个容器来投影我的模板，并使用 ngFor。由于每个（全部可选）对象都有不同的处理方式，因此也有多个模板。我可以将另一个 ngFor 添加为所有这些东西的父级，但这将是不必要的另一层复杂性。这不是什么大问题，如果他们真的想要，我会添加它的。 - Aaron Hazelton

我明白，我在考虑的另一个选择是，您可以创建一个自定义指令，并在mat-expansion-panel中使用ngFor。在该指令中，您可以使用静态计数器并在呈现时将计数器设置为++，因此当该计数器是第一个时，扩展属性将设置为true...如果可以的话，我会展示一个例子。 - Kalamarico

好主意。我会先看看这有多重要。谢谢！ - Aaron Hazelton

你可以使用静态类在计数器内部创建它，并在指令中导入它（它将用于求和），并且还要在组件中导入它（以在模板中使用）。我希望解决了你的问题，如果你还有问题，请再次评论！;) - Kalamarico

Answer 2

你尝试过使用ngFor的“first”本地变量吗？像这样：

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

- DLM

---

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

Answer 3

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

在使用Angular (+2)中的响应式表单数组时，默认会打开第一个面板。

- manjit singh