Ag-Grid показывает третий столбец, которого у меня нет - PullRequest
Новая
       0

Ag-Grid показывает третий столбец, которого у меня нет

0 голосов
/ 05 марта 2020

Я работаю с Angular, и я начал использовать Ag-Grid.

Мне нужно отобразить сетку с двумя столбцами, но когда я ее открыл, она показывает третий разделитель, как если бы было 3 столбца.

enter image description here

Даже если я отображаю данные в строках, есть 3 столбца, это код.

gridView (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>

gridView (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 столбца по умолчанию, я использовал его раньше с большим количеством столбцов, а лишний никогда не показывался.

1 Ответ

1 голос
/ 05 марта 2020

Я думаю, вам нужно позвонить 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 удерживая сетку, она будет отзывчивой.

...