Angular Material & NGRX：当输入改变时，mat-expansion-panels 关闭

Question

我正在开发一个使用 NGRX 和 UI 的 Angular 材质组件的 Angular 应用程序。

一个组件使用 mat-accordion 来显示扩展面板列表。这些扩展面板包含信息和操作这些信息的方法。

当信息被操作时，一个事件被发送到根组件并且一个动作被分派到存储，修改状态。当 store 通过选择器触发这些更改时，订阅 store 的根组件将更改传递给包含 mat-accordion 的组件以及 mat-expansion-panels。

问题：当发出更改时，mat-accordion 的所有扩展面板都会关闭。由于用户应该能够进行进一步的更改，这对于用户体验来说是一个非常大的问题。

编辑 1： 我将扩展面板的扩展输入设置为true 和<mat-expansion-panel [expaned]="true" ... >，并且行为更改为始终打开所有扩展面板进行任何更改。因此，我认为当输入发生变化时，整个组件似乎都被重新创建了。也许发生这种情况是因为我订阅了上面的组件并且只传入了新的数据。看看我是否可以通过在输入中传递 observables 来改变这一点。

编辑 2： 我分叉了 ibenjelloun 的 stackblitz 应用程序并添加了我的 2 美分，这是一个显示不工作行为的示例：https://stackblitz.com/edit/stackoverflow-49691295-qulg9d 我发现，删除模仿 ngrx 行为的行它可以工作，但是使用断线，根组件中的示例也不起作用（很糟糕，因为那应该是我的：看，我不尝试不可能的示例)。这让我有点吃惊，因为我正在开发的应用程序也有一个以相同方式设置的手风琴，但确实按预期工作。

由于这是与工作相关的，我无法显示任何导致问题的原始代码。

Answer 1

好的，这个小麻烦制造者的答案是我没有在 ng-for 中使用 trackBy。 trackBy 使 angular 能够跟踪循环中迭代的元素，即使交付了一个新对象，从而设法保持扩展面板的状态。

identifyer = (index:number, item: any) => item.name; 和 <mat-expansion-panel *ngFor="let c of content; trackBy: identifyer"> 在 stackblitz 示例中达成交易。

https://stackblitz.com/edit/stackoverflow-49691295-qulg9d

Answer 2

我建议您将展开后的面板 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。