javascript - Angular Material : nested expansion panels spill-over when closed

标签 javascript angular typescript angular-material angular-material2

我需要以嵌套模式加载扩展面板。 每个扩展面板都有一个子面板,而每个扩展面板又可能有类似的子面板。 例如:

<!--pseudo-code below-->
<mat-accordion>
  <mat-expansion-panel> Level-1 
    <mat-accordion>
        <mat-expansion-panel>Level-2
            <mat-accordion>
                <mat-expansion-panel>Level-3
                </mat-expansion-panel>
                <mat-expansion-panel>Level-3
                </mat-expansion-panel>
            </mat-accordion>
        </mat-expansion-panel>
        <mat-expansion-panel>
        </mat-expansion-panel>
     </mat-accordion>
    </mat-expansion-panel>
    <mat-expansion-panel> Level-1
    </mat-expansion-panel>
  </mat-accordion>

在这种情况下,当直到第 3 级的面板展开时,如果我单击第 1 级面板的标题,第 1 级面板将关闭,但是,第 3 级面板仍显示在页面上溢出。 我的期望是内层的所有子扩展面板都应该自行折叠以保持 View 干净。 是否缺少导致此问题的配置/属性绑定(bind)。

最佳答案

2018 年 11 月更新

此问题已在 this PR 中的版本 6.0.0-beta.4 中修复.


原帖

嵌套扩展面板似乎还不能完美运行。你可以在 Github 上找到几个问题。对于其中一个,已经有一个 PR:issue 1 , issue 2

关注这些问题,也许可以贡献您的想法;在即将到来的更新中应该会有一个解决方案。

关于javascript - Angular Material : nested expansion panels spill-over when closed,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47868782/

相关文章:

javascript - 如何防止有序列表的编号 <ol> 调整以适应隐藏/取消隐藏元素

html - 某些 Bootstrap 4 类在我的 Angular 8 元素中不起作用

angular - 无法理解 angular2 中的 lambda 表达式?

asp.net - Azure 上的 ASP NET Angular 部署给出 404 找不到任何文件或路由的资源

angular - 滚动到底部; scrollTop = scrollHeight 运行得太早?

javascript - 如何将javascript文件导入到angular4项目中并在组件内部使用它的功能?

typescript - 类型上不存在属性 'prototype'

javascript - 这个javascript代码是什么意思?

javascript - 使用 jQuery 检索 HTML 元素 ID

javascript - 在 IE 中通过 DOM 访问框架