Question

当前在我的angular 7应用程序中使用percentpipe转换ag-grid列上的值时出现错误。有问题的列是“百分比”列，如下面在代码的列定义部分中所见。猫，我用percentpipe还是在ag-grid中做另一种方式

我得到的错误是

ag-Grid：当网格位于绘图行的中间时，无法使网格绘制行。当网格处于渲染阶段时，您的代码可能称为网格API方法。为了解决这个问题，请将API调用置于超时中，例如，代替setapi.refreshView（），调用setTimeout（function（）{api.refreshView（），0}）。要查看导致刷新的代码的哪一部分，请检查此堆栈跟踪。

组件代码

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;
    }
}

用户界面-这是我的专栏外观，无需应用任何格式

Answer 1

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

Answer 2

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

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

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

无法将百分比转化应用于Ag-Grid中的列

2 个答案: