row 在使用 applyTransaction({update: this.rowData}) 时没有被触发

问题描述 投票:0回答:0

我有一个显示上传状态和百分比的单元格渲染器,上传状态正在工作,但每当上传完成并且可观察返回已上传到其上的模型时,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 });
      }
    });
  }

我想做的是在状态上传或错误时更新整行,并在状态上传时启用下载

javascript angular ag-grid
© www.soinside.com 2019 - 2024. All rights reserved.