代码之家 › 专栏 › 技术社区 › simple user

如何展开“角度材质”选项卡以显示角度栅格数据?

angular-grid angular8 angular-material tabs

0

simple user · 技术社区 · 5 年前

我正在使用Angular 8,并希望以以下方式在“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>

问题是,即使数据存在于角度网格中,那么“角度材质”选项卡也不会扩展以使角度网格可见。它显示如下:-

然而,当我把角度网格放在“角度材质”选项卡之外时,网格显示了其全部数据。

我试图使用“mat tab group”的“dynamicHeight”属性,但没有用。

请在这里帮忙。

0 回复 | 直到 5 年前

1

3

simple user 5 年前

以下步骤对我有效:-

将[dynamicHeight]=“true”添加到mat选项卡组。
添加了以下CSS:-

.“材料”选项卡组{ 身高:100%; } .mat tab车身包装{ 弹性增长:1; }

.mat tab主体{ 显示:flex!重要的弯曲方向:柱; }

2

3

Houssem Melliti 5 年前

这对我很有效:

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

您必须使用::ng deep替代“mat”选项卡“body wrapper”样式