ag网格列未自动调整角度大小

我正在尝试修复angular 7应用程序中ag网格上的列大小问题。我已经尝试了一些建议,但没有得到一个解决方案。我要找的是,列应该自动调整大小,并采取屏幕的宽度。目前 第一次渲染时,最后一列会稍微隐藏。我遇到的第二个问题是,当我从另一个组件导航到此页面时,用数据重新加载网格时,网格宽度会发生很大变化。

我还尝试在每一列上添加resize属性,并在定义了min width和maxWidth的情况下设置suppressSizeToFit:false。

初始荷载

从其他组件导航时重新加载网格

html格式

    <div class="form-group row">
      <div class="panel panel-default col-md-12">
        <div *ngIf="AllocationDetails && AllocationDetails.ManagerAllocations" class="panel-body">
          <div [style.height.px]="GridHeight()" [style.width.%]="100" style="float: left;">
            <span style="text-decoration: underline; cursor: pointer;padding-right: 10px;"><a (click)="expandAll()">Expand
                All</a></span>
            <span style="text-decoration: underline; cursor: pointer;"><a (click)="collapseAll()">Collapse
                All</a></span>
            <ag-grid-angular #agGrid class="ag-theme-balham" [gridOptions]="GridOptions" style="width: 100%; height: 100%"
              [columnDefs]="ColumnDefs" [rowData]="AllocationDetails.ManagerAllocations" rowHeight="30" headerHeight="30"
              rowSelection="single" [pinnedBottomRowData]="pinnedBottomRowData"
              [frameworkComponents]="frameworkComponents">
            </ag-grid-angular>
          </div>

        </div>
      </div>
    </div>

成分

    export class AllocationsComponent implements OnInit {


      constructor(private allocationsService: AllocationsService, private comparator: Comparator,
            private zone: NgZone, private route: ActivatedRoute, private spinner: NgxSpinnerService) {
            this.Comparator = comparator;
            this.Route = route;

            window.onresize = (e) => {
                this.ngZone.run(() => {
                    this.windowHeight = window.innerHeight - this.offset;
                    setTimeout(() => {
                        if (!this.GridOptions || !this.GridOptions.api) {
                            return;
                        }
                        this.GridOptions.api.sizeColumnsToFit();
                    }, 500, true);
                });
            };
        }


        setGridOptions() {
            this.GridOptions = {
                columnDefs: this.getColumns(),
                enableFilter: true,
                treeData: true,
                enableColResize: true,
                animateRows: true,
                groupDefaultExpanded: 1,
                enableSorting: true,
                suppressAggFuncInHeader: false,

                getDataPath: function (data) {
                    return data.Hierarchy;
                },
                onGridReady: e => {
                    if (!e || !e.api) {
                        return;
                    }
                    e.api.sizeColumnsToFit();
                    this.setDefaultSortOrder();
                },
                getRowStyle: (params) => {
                    if (params.node.level === 0) {
                        return { 'background-color': '#FCE7D7' };
                    } else if (params.node.level === 1) {
                        return { 'background-color': '#f4f4f4' };
                    }
                },

                autoGroupColumnDef: {
                    headerName: 'Manager Strategy', width: 300,
                    valueFormatter: uniqueColumn
                },

            };
            function uniqueColumn(params) {
                if (params && params.value != null) {
                const startIndex = params.value.indexOf('#');

                if (startIndex === -1) { return params.value; }

                const endIndex = params.value.length;
                return params.value.replace(params.value.substring(startIndex, endIndex), '');
                }

            }
        }

    ngOnInit() {

            this.evalDate = new Date();
            this.setGridOptions();
            this.getAllocationsDetails(this.FormattedDate(this.evalDate));


        }

         GridHeight() {
            if (!this.windowHeight) {
                this.windowHeight = window.innerHeight - this.offset + 10;
            }
            return this.windowHeight;
        }

         private getColumns(): Array<any> {
            const self = this;
            const columnDefs = new Array<any>();
            // const definition = [
                columnDefs.push({ headerName: 'Date', field: 'EvalDate', hide: true});
            columnDefs.push({ headerName: 'Firm ID', field: 'FirmID', hide: true });
            columnDefs.push({ headerName: 'Manager Strategy ID', field: 'FirmName', hide: true });
            columnDefs.push({ headerName: 'Firm', field: 'ManagerStrategyID', hide: true });
            columnDefs.push({ headerName: 'Manager Strategy', field: 'ManagerStrategyName', hide: true });
            columnDefs.push({ headerName: 'Fund ID', field: 'ManagerFundID', hide: true });
            columnDefs.push({ headerName: 'Fund', field: 'ManagerFundName', hide: true });
            columnDefs.push({ headerName: 'Product Name', field: 'ProductName', hide: true });
            columnDefs.push({
                headerName: 'As Of', field: 'EvalDate',
                cellStyle: { textAlign: 'right' },
                hide: false
                ,  width: 150, minWidth: 200, maxWidth: 300, suppressSizeToFit: false
            });
            columnDefs.push({
                headerName: 'EMV (USD)', field: 'UsdEmv', valueFormatter: this.currencyFormatter, rowGroup: false,
                cellRenderer: 'agGroupCellRenderer',
                aggFunc: 'sum',
                cellStyle: { textAlign: 'right' },
                pinnedRowCellRenderer: "customPinnedRowRenderer", pinnedRowCellRendererParams: { style: { "font-weight": "bold" }}
                ,  resizable :true
            });
            columnDefs.push({
                headerName: '% of Fund Strategy', field: 'GroupPercent', valueFormatter: this.formatPercent, rowGroup: false,
                cellRenderer: 'agGroupCellRenderer',
                aggFunc: 'sum',
                cellStyle: { textAlign: 'right' },
                pinnedRowCellRenderer: "customPinnedRowRenderer", pinnedRowCellRendererParams: { style: { "font-weight": "bold" } }
                ,  width: 150, minWidth: 200, maxWidth: 300, suppressSizeToFit: false
            });
            columnDefs.push({
                headerName: '% of Product', field: 'WeightWithEq',
                valueFormatter: this.formatPercent,
                cellStyle: { textAlign: 'right' }
                ,  width: 150, minWidth: 200, maxWidth: 300, suppressSizeToFit: false
            });



        this.pinnedBottomRowData = this.createData();
        this.frameworkComponents = { customPinnedRowRenderer: CustomPinnedRowRenderer };

        return columnDefs;
    }

    }