如何擴展 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 樣式