我正在使用NGRX和UI的角度材质组件开发角色应用程序。
一个组件使用mat-accordion来显示扩展面板列表。这些扩展面板包含处理这些信息的信息和方法。
当操纵信息时，会将事件发送到根组件，并将操作分派到商店，从而修改状态。当商店通过选择器触发这些更改时，订阅商店的根组件会将更改传递给包含mat-accordion的组件以及mat-expansion-panels。
问题：当发生更改时，mat-accordion的所有扩展面板都会关闭。由于用户应该能够进行进一步的更改，这是一个关于用户经验的非常大的问题。
编辑1：
我将扩展面板的扩展输入设置为true <mat-expansion-panel [expaned]="true" ... >，行为更改为全部打开所有扩展面板进行任何更改。因此，我认为当输入发生变化时，整个组件似乎会重新创建。也许这是因为我在上面的组件订阅并且只传递新数据。如果我可以通过在输入中传递observable来改变这一点。
编辑2：我分叉了ibenjelloun的stackblitz应用并添加了我的2美分，这个示例显示了无法正常工作的行为：https://stackblitz.com/edit/stackoverflow-49691295-qulg9d 我发现，删除模仿它运行的ngrx行为的行，但是使用断行也是根组件中的示例不起作用（糟透了，因为那应该是我的：看，我不要尝试不可能的例子）。这让我感到很惊讶，因为我正在处理的应用程序也有相同的方式设置了手风琴，但确实按预期工作。
由于这是相关工作，我无法显示导致问题的任何原始代码。
答案 0 :(得分：5)
好的，这个小麻烦制造者的答案是我没有在ng-for中使用trackBy。 trackBy使angular能够跟踪循环中迭代的元素，即使交付了新的Object，从而设法保持扩展面板的状态。
identifyer = (index:number, item: any) => item.name;和<mat-expansion-panel *ngFor="let c of content; trackBy: identifyer">在stackblitz示例中封印了这笔交易。
答案 1 :(得分：1)
我建议您将展开的面板ID保存在变量中，并将其与expanded输入参数一起使用。
<mat-expansion-panel id="panelA" [expanded]="expandedPanel === 'panelA'">
You can find a running example here.
编辑： 您应该将面板扩展状态保持在某个位置here is a suggestion with an edit of your stackblitz。