Ag-Grid 显示我没有的第三列

Question

我正在使用 Angular，并开始使用 Ag-Grid。

我需要显示一个包含两列的网格，但是当我打开它时，它显示了第三个分隔符，就像有 3 列一样。

即使我在行中显示数据，也有 3 列，这是代码。

网格视图（HTML）

<ag-grid-angular style="width: 100%; height: 100px;" class="ag-theme-balham" [rowData]="rowData"
[columnDefs]="columnDefs" [animateRows]="true" [enableSorting]="true" [enableFilter]="true"
(gridReady)="onGridReady($event)">
</ag-grid-angular>

网格视图（TS）

export class QSubReviewerGridComponent implements OnInit {
    gridApi;
    gridColumnApi;
    defaultColDef;
    columnDefs;
    rowData= [];

    constructor() { 
        this.columnDefs = [
            { headerName: "Review Type", sortable: true, filter: true, field: 'reviewerType' },
            { headerName: "Reviewer", sortable: true, filter: true, field: 'reviewer' },
        ]
        this.defaultColDef = { filter: true };
    }
    ngOnInit() {
    }
    onGridReady(params) {
         this.gridApi = params.api;
         this.gridColumnApi = params.columnApi;
    }

}

我不知道 Ag-grid 是否默认显示 3 列，我以前使用它有更多列，但它从未显示额外的一列。

Answer 1

我想你必须打电话给 sizeColumnsToFit。

尝试：

onGridReady(params) {
         this.gridApi = params.api;
         this.gridApi.sizeColumnsToFit();
         this.gridColumnApi = params.columnApi;
 }

==================编辑========================== ==

为了让它响应，我会做以下事情：

<ag-grid-angular 
    style="width: 100%; height: 100px;" 
    class="ag-theme-balham" 
    [rowData]="rowData"
    [columnDefs]="columnDefs" 
    [animateRows]="true" 
    [enableSorting]="true" 
    [enableFilter]="true"
    (gridReady)="onGridReady($event)"
    (gridSizeChanged)="onGridSizeChanged($event)"
>
</ag-grid-angular>
....
onGridSizeChanged(params: GridSizeChangedEvent) {
  params.api.sizeColumnsToFit();
}

现在，当您增大或减小 div 持有网格的大小时，它会做出响应。

Ag-Grid 显示我没有的第三列

Ag-Grid show a third column that I don't have

angular

ag-grid-angular