问题标签 [mat-expansion-panel]

我的扩展面板没有填满容器的整个宽度，即使我将宽度设置为 100%。任何想法如何让它填补可用空间？我尝试创建一个堆栈闪电战。我不知道为什么没有显示https://angular-hikqnf.stackblitz.io 我的 ts 文件

我的模板

我的scss文件

我对 Angular 很陌生，我正在尝试在我的搜索/过滤器栏中实现一个按钮，该按钮将在单击时展开 mat-expansion-panel，但这些面板位于不同的组件中，我不确定结构为了这。

按钮 HTML：

这是应该放置功能的 TS 文件：

如果需要更多代码，请告诉我。有什么建议么？

我在垫子扩展面板中有类别及其子类别。我想在页面刷新时保持活动类别的扩展。我附上参考代码。现场演示在这里https://budgetgrocery.com.au/products/flours。选择任何类别并刷新页面。所选类别的展开面板目前不会展开。

html模板

组件文件

我曾尝试使用扩展面板的 [expanded] 和 (opened) 方法，没有奏效。请提出解决方案。

我正在尝试添加一个带有可滚动内容的 Angular 材质扩展面板。

但是，我在 div 中有扩展面板，它位于 flexbox 容器中。

我希望扩展面板填充 div 内的可用空间，但不扩展它。

我在面板内容 div 中的 div 中添加了溢出：自动，这样我就可以在面板中拥有可滚动的内容。

但是如何在不增加父 div 高度的情况下获得具有面板内容类的 div 来填充可用空间？

我知道整个父级的高度为 400 像素，但这仅适用于本示例。这可能是屏幕尺寸的 100%，所以我无法手动设置面板内容 div 的高度或最大高度。我只是希望它自动填充空间。

如果您尝试我的示例，当面板展开时，您会看到红色 div 的大小增加。

https://stackblitz.com/edit/angular-9-material-starter-cbiquu?file=src/app/app.component.html

通过布尔变量关闭 Angular Material Expansion Panel 后，它关闭得很好，但要再次打开它，您需要单击它 3 次才能重新打开它。显然，在 Angular 6 中，它在相同的示例中运行良好，但我显然不想降级，我尝试了 Angular 10 和 11，但它没有用。我还尝试通过面板的关闭方法等不同的方式关闭它，但没有区别。

显示问题的简短 gif

Stackblitz：Angular 11： https ://stackblitz.com/edit/angular-ivy-4qj1n9?file=src%2Fapp%2Fapp.component.html

角 6 https://stackblitz.com/edit/material-all-examples-quprqw?file=app%2Fapp.module.ts

€dit：我能够创建一个没有这种奇怪行为的版本，但它没有动画，这也很糟糕。 https://stackblitz.com/edit/angular-ivy-ar4tjp?file=src%2Fapp%2Fapp。组件.html

我正在使用 angular 和 aggrid，我希望我的网格在垫子扩展面板中适应高度，以便在打开时占用所有屏幕可用空间。我该怎么做，最好是在css中？

似乎 aggrid 正在适应容器和对内容的 mat 扩展。

我还希望将橙色文本固定在面板底部，并且滚动条仅用于网格。

我做了一个 plunker 来帮忙：https ://plnkr.co/edit/Y0tJ1yoDb5LhDB8a

谢谢

我有 2 个不同的组件，我在其中使用 Angular - 扩展面板来扩展摘要视图。

我能够<mat-expansion-panel>成功集成到各个组件。

我需要帮助才能成为Component2.html（Component1.html在展开内展开 - 请参见下图）

• 组件 1 应该能够独立展开和折叠以显示数据

• 组件 2 应该将组件 1 嵌入到自身中，所以当Component 1 is expanded it can show its data and display remaining Child components

注意- 两个组件都具有兄弟关系，no parent child或child - parent

组件1.html

组件2.html

.ts 文件

更新

罗比在下面给出的答案适用于parent - child component relation 但不适用于sibling component

我<mat-expansion-panel>在我的项目中使用 Angular。

我无法显示Frate, Kunda and date和its value打开one line。

我尝试过使用各种 css 属性，例如，white-space: nowrap;但没有一个对我有用

工作演示 - https://stackblitz.com/edit/mat-expansion-panel-en61pv?file=app%2Fexpansion-overview-example.html

.html

.ts 文件

我正在制作一个sidenav，我用它mat-expansion-panel来创建我的sidenav的按钮。

我创建了子菜单，我没有问题：

但现在我想添加子子菜单。例如，我想在 下添加Users list一个新的子菜单Add user。如果可以的话，我想再次使用mat-expansion-panel

有没有可能实现这一目标？

现在，这是我的 sidenav（都是动态的）

在我的项目中，我正在使用<mat-expansion-panel>. 我正在尝试将2 title elementusing<mat-panel-title>与他们并排添加respective description

目前我的代码显示

Title1 Title2 Description1 Description2

我正在寻找的是

Title1 Description1 Title2 Description2

这是我的代码 - 链接 - https://stackblitz.com/edit/mat-expansion-panel-q1qxz7?file=app%2Fexpansion-overview-example.html