В настоящее время я получаю сообщение об ошибке при использовании процентной трубы для преобразования значений в столбце ag-grid в моем приложении 7 angular.Обсуждаемый столбец - это процентный столбец, как показано ниже в разделе определения столбца в коде.Cat я использую процентную трубу или есть другой способ сделать это в 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;
}
}
Интерфейс - так выглядит мой столбец без применения какого-либо формата
