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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (43)

我正在使用percentpipe转换我的角度7应用程序中ag-grid列上的值时出错。有问题的列是百分比列,您可以在下面的代码中的列定义部分中看到。我使用百分比管道还是在ag-grid中有另一种方法

我得到的错误是

ag-Grid:当绘制行的中间时,无法获取网格绘制行。当网格处于渲染阶段时,您的代码可能称为网格API方法。为了解决这个问题,将API调用置于超时状态,例如代替api.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;
    }
}

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

提问于
用户回答回答于

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

扫码关注云+社区

领取腾讯云代金券