Javascript 带角形材质标签的容器的高度问题

我正在使用角度材质制作一个角度应用程序，我的标签内容高度有一个大问题。这是我第一次尝试Angular，但我熟悉HTML、CSS和JavaScript

情况是，我有一个带有MatSidenav组件的应用程序，在

Sidenav

内容中，我有一个

MatTab

组件，其中包含一个包装器，用于将其他组件动态加载到新选项卡中。这一切都按我所希望的那样进行，问题在于选项卡的内容，特别是在创建选项卡后获取其内容的选项卡（例如，包含从REST服务加载数据的组件的选项卡）

我已经根据我的实际应用程序创建了一个应用程序来说明这个问题

当从菜单中“测试一个”时，它只显示顶部的按钮。“获取数据”按钮将简单地填充数据表（AgGrid）使用的

行为子对象

（某种程度上是模拟REST调用的尝试，实际应用程序有此功能）。所有内容都按照我的意愿填充和显示，但是容器元素（其中一个，我一辈子都无法确定哪个是真正的cuprit）不够高，所以表中没有实际显示。 “Test Two”只是一个带有静态内容的选项卡的示例，它的显示与我预期的一样（实际上与Home选项卡相同）

我放置了一个按钮，用于在500px和blank之间切换表的

容器div

的

height

属性。当然，如果我希望静态高度值为500px（或任何px值），这将非常好，但我希望它与视口的其余部分一样高

我尝试过处理

mat tab group

的

dynamicHeight

属性，但如果我关闭该属性，会导致一系列其他问题，因为我有内容高度非常可变的选项卡。 我也尝试过各种flexbox设置，使用引导d-flex和Angulars自己的ngFlex，但似乎都不起作用

现在这个特殊的例子是针对

AgGrid

表的，但是我在嵌入Google Maps的选项卡上遇到了同样的问题，但是我想如果我能解决这个问题，我将能够应用类似的方法来修复Maps问题。我假设这是由于页面呈现后内容的变化造成的，但这也是一个要点，所以CSS似乎没有跟上，这让我非常困惑

我解决这个问题的唯一方法是使用JavaScript，在

ngAfterViewInit

中设置各种元素的高度，并绑定一个事件来调整窗口大小，但这似乎是一种非常老练的方法，也意味着我必须对所有可以加载到选项卡中的组件执行此操作，不仅仅是我目前遇到的问题（因为我必须设置多个选项卡容器元素的高度，即使在切换选项卡时，这些元素也是相同的）

---

如果您能提供帮助，我将不胜感激。

我只是谨慎地使用了ag grid，但我注意到它们处理高度的方式很奇怪。我认为您缺少一个“自动高度”domLayout属性：

<ag-grid-angular
    style="width: 100%; height: 100%;"
    class="ag-theme-balham mat-elevation-z8"
    [rowData]="loadedData"
    [columnDefs]="agtablecolumns"
    [domLayout]="'autoHeight'"
>
</ag-grid-angular>

---

不过，在stackblitz中添加这一点会导致在检索任何数据之前出现一个空表。不确定这是否是目标。

谢谢！虽然我使用了domLayout=“autoHeight”，因为不必对静态字符串值使用属性绑定，但这确实有效。在我的实际应用程序中，如果没有数据可显示，则整个容器div都将隐藏，因此这正是它应该如何工作的。这确实给我留下了谷歌地图的问题，据我所知，谷歌地图没有任何这样的属性。现在，我应该发布一个新的案例（和stackblitz），还是更新这个？我显然仍在学习在stackoverflow上做事情的正确方法：）我说得太快了——虽然这确实有效，但这并不是我想要达到的目标。使用此方法，表的标题行将与其他行一起向上滚动。它确实有效，但它不允许我在将标题固定到顶部的同时让表格向下滚动。如果这是不可能的，这个解决方案是我可以接受的，但它不是最佳的。