使用订阅时更新AG网格中的行

我使用的是AG Grid和angular 14。

我有一个带有单元格渲染器的列,这个列有一个触发文件上传的按钮。文件上传成功后,应禁用该按钮。这个过程运行良好,只是网格没有更新,除非我刷新浏览器。

我尝试过使用网格api更新网格、刷新单元格和重置网格选项的各种方法。

以下是我的组件代码:

@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();
  }
}

以及单元渲染器组件:

@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);
    }
  }
}

以及共享服务:

@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);
  }
}