无法为 ag-grid 中的列应用百分比转换答案

【问题标题】：Not able to apply percent conversion for column in ag-grid无法为 ag-grid 中的列应用百分比转换
【发布时间】：2019-07-25 16:23:53
【问题描述】：

我目前在我的 Angular 7 应用程序中使用百分比管道转换 ag-grid 列上的值时遇到错误。有问题的列是百分比列，您可以在下面代码的列定义部分中看到。猫我使用百分比管道，或者在 ag-grid 中有另一种方法

我得到的错误是

ag-Grid：当网格位于绘制行的中间时，无法让网格绘制行。当网格处于渲染阶段时，您的代码可能调用了网格 API 方法。为了克服这个问题，将 API 调用设置为超时，例如调用 setTimeout(function(){api.refreshView(),0})，而不是 api.refreshView()。要查看导致刷新的代码部分，请检查此堆栈跟踪。

组件代码

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 - 这就是我的专栏在没有应用任何格式的情况下的样子

【问题讨论】：

标签： angular ag-grid

【解决方案1】：

已经通过编写我自己的方法解决了这个问题基本上只需将数字乘以 100 并将其四舍五入到小数点后两位。就这么简单。

【讨论】：

【解决方案2】：

我也选择了 value*100 的解决方案。这是任何人在谷歌上搜索的一些代码......

cellRenderer: props => {
if (isNumeric(props.value)) return `${props.value * 100}%`;
},

后续问题： 您是否找到了一种在编辑模式下显示百分比 77% 而不是 0.77 的方法？

【讨论】：