无法对 ag-grid 中的列应用百分比转换

Question

我目前在 angular 7 应用程序中使用 percentpipe 转换 ag-grid 列上的值时出错。有问题的列是百分比列，您可以在下面代码的列定义部分中看到。 Cat 我使用 percentpipe 或者在 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, ',');
        }

        function formatPercent(number) {

             return this.percentPipe.transform(number);
        }


        return definition;
    }
}

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

Answer 1

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

Answer 2

我也采用了价值*100 的解决方案。这里有一些代码供任何人使用谷歌搜索...

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

追问： 您找到在编辑模式下显示百分比 77% 而不是 0.77 的方法了吗？

无法对 ag-grid 中的列应用百分比转换

Not able to apply percent conversion for column in ag-grid

ag-grid

angular