如何扩展 Angular 材料选项卡以显示 Angular 网格数据？

Question

我正在使用 Angular 8 并希望以下列方式在 Angular 材料选项卡内显示 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 材料选项卡也不会扩展以使 Angular 网格可见。 它显示如下： -

但是，当我将 Angular 网格放在 Angular 材料选项卡之外时，网格会显示其完整数据。

我尝试使用“mat-tab-group”的“dynamicHeight”属性，但它没有用。

请在这里帮忙。

Answer 1

以下步骤对我有用：-

1. 将 [dynamicHeight] = "true" 添加到 mat-tab-group。

2. 添加了以下 CSS：-

   .mat-tab-group{ 高度：100%； }.mat-tab-body-wrapper { flex-grow: 1; }

   .mat-tab-body { display: flex;important: flex-direction; 柱子; }

Answer 2

这对我有用：

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

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