带有角材料标签的容器高度问题

Question

我正在使用 Angular Material 制作一个 Angular 应用程序，但我的选项卡内容的高度存在很大问题。 这是我第一次尝试 Angular，但我熟悉 HTML、CSS 和 JavaScript。

的情况是，我与MatSidenav成分的应用，以及内部Sidenav内容我有MatTab组分，其包含一个包装动态加载其它组分到新的选项卡。 这一切都如我所愿，问题在于选项卡的内容，特别是在创建选项卡后获取其内容的选项卡（例如，包含从 REST 服务加载数据的组件的选项卡）。

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

从菜单转到“测试一”时，它只显示顶部的按钮。 “获取数据”按钮将简单地填充数据表 (AgGrid) 使用的BehaviorSubject （尝试模拟实际应用程序具有的 REST 调用）。 所有都按照我的意愿填充和显示，但是容器元素（其中一个，我一生都无法弄清楚哪个是实际的cuprit）不够高，所以表格实际上没有显示. “测试二”只是一个带有静态内容的选项卡的示例，它按我的预期显示（实际上与主页选项卡相同）。

我放了一个按钮来在 500px 和空白之间切换表格的container-div的height属性。 当然，如果我想要 500px（或任何 px 值）的静态高度值，这会很棒，但我希望它与视口的其余部分一样高。

我试过弄乱mat-tab-group的dynamicHeight属性，但是如果我关闭它，它会导致很多其他问题，因为我有内容高度可变的选项卡。 我还尝试了各种 flexbox 设置，使用 Bootstrap d-flex 以及 Angulars 自己的 ngFlex，但似乎没有任何效果。

现在这个特定案例适用于AgGrid表，但我在嵌入 Google 地图的选项卡上遇到了同样的问题，但我想如果我能解决这个问题，我将能够应用类似的方法来修复地图问题。 我假设它是由页面呈现后内容更改引起的，但这也是重点，因此 CSS 似乎没有跟上，这让我感到困惑。

我设法解决这个问题的唯一方法是使用 JavaScript 并在ngAfterViewInit设置各种元素的高度并将事件绑定到窗口调整大小，但这似乎是一种非常hack-ish的方法，这也意味着我必须为所有可以加载到选项卡中的组件执行此操作，而不仅仅是我当前遇到问题的地方（因为我必须设置几个选项卡容器元素的高度，即使选项卡是相同的元素切换）。

对此的任何帮助将不胜感激。

Answer 1

我只很少使用 ag-grid，但我注意到它们处理高度的方式很奇怪。 我认为您缺少一个 'autoHeight' 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 中添加它会导致在检索任何数据之前出现一个空表。 不确定这是否是目标。