如何展开 Angular Material 选项卡以显示 Angular 网格数据？

Question

我正在使用 Angular 8 并希望按以下方式在 Angular Material 选项卡中显示 Angular 网格：-

<mat-tab-group>
        <mat-tab label="Request Flow">
            <div class="div-main">
                <ag-grid-angular class="ag-theme-balham grid-dimensions" [pagination]="true"
                    [gridOptions]="reqDetailGridOptions" [rowData]="reqDetailRowData" [columnDefs]="reqDetailColDef"
                    [getRowHeight]="getRowHeight" [paginationPageSize]=50 (gridReady)="onGridReady($event)">
                </ag-grid-angular>
                <br />                
                <button class="button-internal">Add Subrequest</button>
            </div>
        </mat-tab>
    </mat-tab-group>

问题是，即使 Angular 网格中存在数据，Angular Material 选项卡也不会展开以使 Angular 网格可见。显示如下：-

然而，当我将 Angular 网格放在 Angular Material 选项卡之外时，网格会显示其完整数据。

我尝试使用 "dynamicHeight" 属性或 "mat-tab-group" 但没有用。

请帮忙。

Answer 1

以下步骤对我有用：-

添加 [dynamicHeight] = "true" 到 mat-tab-group。
添加了以下 CSS:-

.mat-tab-group{ 高度：100%； } .mat-tab-body-wrapper { 弹性增长：1； }

.mat-tab-body { 显示：弹性！重要；弹性方向：列； }

Answer 2

这对我有用：

::ng-deep.mat-tab-body-wrapper { 
    flex-grow: 1; 
}

你必须用 ::ng-deep 覆盖 mat-tab-body-wrapper 样式

如何展开 Angular Material 选项卡以显示 Angular 网格数据？

How to expand Angular Material Tab to show Angular Grid data?

tabs

angular-material

angular-grid

angular8