Angular Material 和 NGRX : mat-expansion-panels close when Input changes

Question

我正在使用 NGRX 和用于 UI 的 Angular Material Components 开发 Angular 应用。

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

当信息被操纵时，一个事件被发送到根组件，一个 Action 被分派(dispatch)到商店，修改状态。当商店通过选择器触发这些更改时，订阅商店的根组件会将更改传递给包含 mat-accordion 的组件以及 mat-expansion-panels。

问题: 当发出更改时，垫子 Accordion 的所有扩展面板都会关闭。由于用户应该能够进行进一步的更改，因此这是一个涉及用户体验的非常大的问题。

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

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

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

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