首页 文章

Angular Material＆NGRX：输入更改时，mat-expansion-panels关闭

提问于
浏览 次
0

我正在使用NGRX和Angular Material Components为UI工作Angular App .

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

操作信息时，会将事件发送到根组件，并将操作分派给存储，从而修改状态 . 当商店通过选择器触发这些更改时，订阅商店的根组件会将更改传递给包含mat-accordion的组件以及mat-expansion-panels .

The Problem: 当发生变化时，席子手风琴的所有扩展面板都会关闭 . 由于用户应该能够进行进一步的更改，这是一个关于用户经验的非常大的问题 .

Edit 1: 我使用 <mat-expansion-panel [expaned]="true" ... > 将扩展面板的扩展输入设置为 true ，行为更改为全部打开所有扩展面板进行任何更改 . 因此，我认为当输入发生变化时，整个组件似乎会重新创建 . 也许这是因为我在上面的组件订阅并且只传递新数据 . 如果我可以通过在输入中传递observable来改变这一点 .

Edit 2: 我分叉了ibenjelloun的stackblitz应用程序并添加了我的2美分，一个显示不工作行为的示例：https://stackblitz.com/edit/stackoverflow-49691295-qulg9d我发现，删除模仿其工作的ngrx行为的行，但是断行也是根组件中的示例不起作用（糟透了，因为那应该是我的：看，我不尝试不可能的例子） . 这让我感到很惊讶，因为我正在处理的应用程序也有相同的方式设置了手风琴，但确实按预期工作 .

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

angular angular-material ngrx

2 回答

  • 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 .

    回复于
  • 1

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

    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

    回复于

相关问题