Ag-GRID 与 Angular：渲染问题

Question

我尝试在我的 Angular 12 / Bootstrap 5 应用程序中放置一个 ag-grid 表，但我有一个奇怪的问题：该表在渲染时的高度为 0px。

这是渲染的表格：

通过chrome的调试工具可以看到下面的div是用0px高度计算的： div class =“ag-tab-guard ag-tab-guard-top”角色=“演示”tabindex =“0”

表格位于主体正下方的引导容器中，这是我的组件的 HTML :

<div class="container-fluid">
    <ag-grid-angular (cellClicked)="onCellClicked($event)"
        (gridReady)="onGridReady($event)"
        [animateRows]="true"
        [columnDefs]="columnDefs"
        [defaultColDef]="defaultColDef"
        [rowData]="rowData$ | async"
        [rowSelection]="'multiple'"
        style="width: 100%; height: 100%"
    ></ag-grid-angular>
    <!--<router-outlet></router-outlet>-->
</div>

我尝试过使用和不使用 ag-gris SCSS 导入、主题，但都没有解决问题。

Answer 1

我发现了这个问题，我在组件SCSS中导入了AG-GRID的SCSS文件，但它要求将文件导入到styles.scss中