Updating rows in AG grid, when using subscriptions

I am using AG Grid and angular 14.

I have a column with a cell renderer, this column has a button which triggers a file upload. When an upload of a file is successful, the button should be disabled. The process works fine, except that the grid is not updating, unless i refresh the browser.

I have tried using the various ways of updating the grid using the grid api, refreshing cells and resetting the grid options.

below is my component code:

@Component({
  selector: 'invoice-overview',
  templateUrl: './invoice.component.html',
  styleUrls: ['./invoice.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class InvoiceComponent implements OnInit, OnDestroy {
  invoiceResponse: Invoice[] = [];
  invoiceSearchSubscription: Subscription = new Subscription();

  destroy$ = new Subject<void>();

  gridOptions: GridOptions = {
    context: { componentParent: this },
  };

  gridApi: GridApi | undefined;

  constructor(
    private invoiceService: InvoiceService
  ) {}

  ngOnInit(): void {
      this.invoiceSearchSubscription = this.invoiceService.invoiceResponse$().subscribe((invoiceResponse: Invoice[]) => {
         this.invoiceResponse = invoiceResponse;
      });
  }

  onGridReady(params: GridReadyEvent): void {
    this.gridApi = params.api;
    this.gridApi?.showLoadingOverlay();
  }

  ngOnDestroy(): void {
    this.invoiceSearchSubscription.unsubscribe();
  }
}

and the cell renderer component:

@Component({
  selector: 'document-cell-renderer',
  templateUrl: 'document-cell-renderer.component.html'
})
export class DocumentIconCellRendererComponent implements ICellRendererAngularComp {
  params!: ICellRendererParams;

 
  constructor(
    private documentsService: DocumentsService,
    private invoiceService: InvoicesService,
  ) {}

  agInit(params: ICellRendererParams): void {
    this.params = params;
  }

  refresh(params: ICellRendererParams<any>): boolean {
    return false;
  }

  async onFileSelected(event: any, invoice: Invoice): Promise<void> {
      let componentParent = this.params.context.componentParent;
      const file: File = event.target.files[0];
     
      
      const response: string = await this.documentsService.handleDocumentUpload(file, invoice.id);

        if (response != null && response !== '') {
          await this.updateInvoiceResponse(invoice.id, componentParent.invoiceResponse);
        
        }
 
    }

  private async updateInvoiceResponse(invoiceId: string, invoiceResponse: Invoice[]): Promise<void> {
    const updatedInvoice: invoice = await this.service.SearchSingleInvoice(invoiceId);
    const index: number = invoiceResponse.findIndex((responseInvoice: Invoice) => invoiceResponse.id === updatedInvoice.id);

    if (updatedInvoice && index !== -1) {
      invoiceResponse[index] = updatedInvoice;
      this.invoiceService.setSearchInvoicesResponse(invoiceResponse);
    }
  }
}

and the shared service:

@Injectable({
  providedIn: 'root'
})
export class InvoiceService {
 
  private _searchInvoiceResponse: Subject<Invoice[]> = new Subject<Invoice[]>();

  invoicesResponse$(): Observable<Invoice[]> {
    return this._searchInvoiceResponse.asObservable();
  }

  setSearchInvoicesResponse(invoices: Invoice[]): void {
    this._searchInvoiceResponse.next(invoices);
  }
}

>Solution :

Could you try calling the function setRowData after setting the value?

private async updateInvoiceResponse(invoiceId: string, invoiceResponse: Invoice[]): Promise<void> {
    const updatedInvoice: invoice = await this.service.SearchSingleInvoice(invoiceId);
    const index: number = invoiceResponse.findIndex((responseInvoice: Invoice) => invoiceResponse.id === updatedInvoice.id);

    if (updatedInvoice && index !== -1) {
      invoiceResponse[index] = updatedInvoice;
      this.params.api.setRowData('rowData', invoiceResponse); // <- changed here!
      this.invoiceService.setSearchInvoicesResponse(invoiceResponse);
    }
  }