当前在我的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;
}
}
用户界面-这是我的专栏外观,无需应用任何格式
答案 0 :(得分:0)
已通过编写我自己的方法解决了此问题 基本上只需将数字乘以100并将其四舍五入到小数点后两位。就这么简单。
答案 1 :(得分:0)
我也选择了 value*100 的解决方案。 这是任何谷歌搜索的人的一些代码......
cellRenderer: props => {
if (isNumeric(props.value)) return `${props.value * 100}%`;
},
一个后续问题: 在编辑模式下,您是否找到了一种将百分比显示为 77% 而不是 0.77 的方法?