tabs - 如何展开 Angular Material 选项卡以显示 Angular Grid 数据？

Question

我正在使用 Angular 8，并希望以下列方式在 Angular Material 选项卡中显示 Angular Grid：-

<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 Grid 中存在数据，Angular Material Tab 也不会扩展以使 Angular Grid 可见。它显示如下： -

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

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

请在这里帮忙。

Answer 1

这对我有用：

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

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

Answer 2

以下步骤对我有用：-

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; 弹性方向：列；}