我有一个显示上传状态和百分比的单元格渲染器,上传状态正在工作,但每当上传完成并且可观察返回已上传到其上的模型时,ag 网格不会将 UI 更新为已上传
{
width: 15,
field: 'fileNumber',
headerName: '#',
},
{ minWidth: 350, field: 'fileName', headerName: 'Name' },
{
minWidth: 380,
field: 'percentage',
headerName: 'Upload Process',
cellRenderer: FileUploadStatusComponent,
},
{
width: 200,
field: 'size',
headerName: 'File Size',
cellRenderer: (params: any) => {
return params.value + 'KB';
},
},
{
width: 300,
field: 'Action',
cellRenderer: FileUploadActionComponent,
cellRendererParams: {
onClick: this.showDeletePopUpMessage.bind(this),
onClickDownload: this.downloadFiles.bind(this),
},
},
];
`
在状态单元格渲染器中
backgroundValue = 'conic-gradient(#0074c7 ' + 50 * 3.6 + 'deg, #e2f3ff 0deg)';
statusText: string = '';
statusIcon: string = '';
percent: number = 1;
agInit(value: ICellRendererParams): void {
this.statusText = value.data?.status;
if (this.statusText === 'uploading') {
this.statusIcon = this.statusText + '-icon';
this.backgroundValue =
'conic-gradient(#0074c7 ' +
value.data.percentage * 3.6 +
'deg, #e2f3ff 0deg)';
} else if (this.statusText === 'uploaded') {
this.statusIcon = this.statusText + '-icon';
} else if (this.statusText === 'error') {
this.statusIcon = this.statusText + '-icon';
}
}
refresh(params: ICellRendererParams<any>): boolean {
return false;
}
这是添加和更新 ag 网格的功能,如您所见,我已经设置了 applyTransaction(//update) 来刷新行,但它不起作用,我尝试了 refreshCell,但它也不起作用
addFileInArray() {
this.uploaderService.latestFileUpload$.subscribe((value) => {
if (value.status === 'default') {
return;
}
const rowNumExist = this.rowData.findIndex(
(row) => row.fileName === value.fileName
);
if (rowNumExist === -1) {
// Add new row to the grid
this.rowData.push(Object.assign({}, value));
this.gridApi.applyTransaction({ add: [value] });
} else {
// const itemToUpdate = this.rowData[rowNumExist];
this.fileRowTemp = [...this.rowData];
this.rowData.forEach((itemToUpdate, index) => {
if (itemToUpdate.fileNumber === value.fileNumber) {
this.rowData[index].percentage = value.percentage;
this.rowData[index].bytesUploaded = value.bytesUploaded;
if (value.percentage === 100) {
this.rowData[index].status = 'value.status';
console.log(
`filename: ${itemToUpdate.fileName} status is ${itemToUpdate.status}`
);
// this.rowData.push(Object.assign({}, value));
// this.gridApi.applyTransaction({ add: [value] });
}
}
});
// this.rowData = this.fileRowTemp;
this.gridApi.applyTransaction({ update: this.rowData });
}
});
}
我想做的是在状态上传或错误时更新整行,并在状态上传时启用下载