代码之家  ›  专栏  ›  技术社区  ›  Tom

无法对ag网格中的列应用百分比转换

  •  0
  • Tom  · 技术社区  · 5 年前

    我得到的错误是

    ag Grid:当Grid位于绘图行的中间时,无法让它绘制行。您的代码可能在网格处于呈现阶段时调用了网格API方法。为了克服这个问题,将API调用设为超时,例如api.refreshView文件(),调用setTimeout(function(){api.refreshView文件(),0}). 要查看导致刷新的代码部分,请检查此stacktrace。

    import { formatDate, PercentPipe } from '@angular/common';
    
     export class AllocationsComponent implements OnInit {
    
        private Error: string;
        public evalDate: Date;
        private _evalDate: Date;
        public AllocationDetails: any;
        private _ManagerStrategyId: number;
        public GridOptions: GridOptions;
        windowHeight: any;
        offset: number;
        ngZone: any;
        router: any;
        Comparator: Comparator;
        Route: any;
    
    
       constructor(private allocationsService: AllocationsService, private comparator: Comparator,
                    private zone: NgZone, private route: ActivatedRoute, private percentPipe: PercentPipe) {
            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(),
                rowData: this.AllocationDetails,
                enableFilter: true,
                enableColResize: true,
                animateRows: true,
                groupDefaultExpanded: 1,
                enableSorting: true,
                suppressCellSelection: true,
    
                onGridReady: e => {
                    if (!e || !e.api) {
                        return;
                    }
                    e.api.sizeColumnsToFit();
                    this.setDefaultSortOrder();
                },
                getRowStyle: (params) => {
                    if (params.node.level === 0) {
                        return { 'background-color': '#FCE7D7' };
                    }
                },
    
                autoGroupColumnDef: {
    
                    headerName: 'Manager Strategy', width: 300
                },
            };
        }
    
    
         private getColumns(): Array<any> {
            const self = this;
            const definition = [
                { headerName: 'Date', field: 'EvalDate', hide: true },
                { headerName: 'Firm ID', field: 'FirmID', hide: true },
                { headerName: 'Manager Strategy ID', field: 'FirmName', hide: true },
                { headerName: 'Firm', field: 'ManagerStrategyID', hide: true },
                { headerName: 'Manager Strategy', field: 'ManagerStrategyName' },
                { headerName: 'Fund ID', field: 'ManagerFundID', hide: true },
                { headerName: 'Fund', field: 'ManagerFundName' },
                { headerName: 'Portfolio', field: 'ProductName' },
                { headerName: 'As Of', field: 'EvalDate',   cellRenderer: (data) => {
                    return data.value ? (new Date(data.value)).toLocaleDateString() : '';
                 } },
                { headerName: 'EMV (USD)', field: 'UsdEmv',  valueFormatter: currencyFormatter },
                { headerName: 'Percent', field: 'GroupPercent' ,  valueFormatter: formatPercent},
              ];
                function currencyFormatter(params) {
                return '$' + formatNumber(params.value);
            }
    
            function formatNumber(number) {
                // this puts commas into the number eg 1000 goes to 1,000,
                 return Math.floor(number).toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
            }
    
            function formatPercent(number) {
    
                 return this.percentPipe.transform(number);
            }
    
    
            return definition;
        }
    }
    

    UI-这就是我的专栏在不应用任何格式的情况下的样子

    enter image description here

    0 回复  |  直到 5 年前
        1
  •  0
  •   Tom    5 年前

    我自己的写作方法解决了这个问题