Как развернуть вкладку Angular Material для отображения данных Angular Grid?

Question

Я использую Angular 8 и хочу показать Angular Grid на вкладке Angular Material следующим образом: -

<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 нерасширяется, чтобы сделать Angular Grid видимым. Показывается, как показано ниже: -

Однако, когда я помещаю Angular Grid вне вкладки Angular Material, тогда сетка показывает свои полные данные.

Я пытался использовать свойство «dynamicHeight» для «mat-tab-group», но оно бесполезно.

Пожалуйста, помогите здесь.

Answer 1

У меня сработали следующие шаги: -

1. Добавлен [dynamicHeight] = "true" в mat-tab-group.

2. Добавлен следующий CSS: -

   .mat-tab-group {height: 100%;} .mat-tab-body-wrapper {flex-grow: 1;}

   .mat-tab-body {display: flex! Важный;flex-direction: столбец;}