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

我用的是AG Grid和Angular 14.

我有一个带有单元格呈现器的列，该列有一个触发文件上载的按钮.当文件上传成功时，应禁用该按钮.这个过程运行得很好，只是网格不会更新，除非我刷新浏览器.

我try 了使用网格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);
  }
}