1

私は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 タブも展開されず、Angular Grid が表示されないことです。以下のように表示されます： -

ここに画像の説明を入力

ただし、Angular Grid を Angular Material タブの外側に配置すると、グリッドに完全なデータが表示されます。

「mat-tab-group」の「dynamicHeight」プロパティを使用しようとしましたが、役に立ちません。

ここで助けてください。

4

2 に答える 2

3

以下の手順は私のために働いた： -

  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; フレックス方向: 列; }

于 2019-10-23T02:29:55.947 に答える