Angular中innerHTML属性绑定无需页面刷新更新问题求助

我有一个文件上传表单和一个绑定了innerHTML属性的空div。用户上传Excel文件后，服务器会处理文件并将其转换为HTML存入数据库。Angular会从数据库获取数据，经过清理（保留CSS样式）后通过innerHTML属性绑定插入到空div中。

问题是上传文件后，div内容必须刷新页面才会更新，我希望无需刷新页面就能更新<div *ngIf="budgetHTML" [(innerHTML)]="budgetHTML"></div>的内容。我是Angular新手，请问该如何实现？

附上相关代码：

component.html #

<div *ngIf="budgetHTML" [(innerHTML)]="budgetHTML">
</div>

component.ts（仅保留相关代码） #

export class ProgramProjectInformationComponent implements OnInit, OnDestroy {

  budgetHTML: SafeHtml;

  constructor(
    private store: Store<AppStateInterface>,
    private formBuilder: UntypedFormBuilder,
    private grantProposalService: GrantProposalService,
    private route: ActivatedRoute,
    private sanitizer: DomSanitizer,
  ) {}

  ngOnInit(): void {
    this.initializeForm();
    this.initializedValues();
    this.initializePdoPrograms();
    this.initializePdoBankAccounts();
    this.intializeListeners();
    this.initializeBudgetTable();
  }

  initializedValues() {
    this.grantProposalData$ = this.store.pipe(select(grantProposalSelector));
    this.isLoading$ = this.store.pipe(select(isFetchingGrantProposalSelector));
    this.composeBankAccount$ = this.store.pipe(select(grantProposalComposeBankAccountSelector));
    this.grantProposalDraftStatus$ = this.store.select(grantProposalDraftStatusSelector);
  }

    initializeBudgetTable() {
        this.grantProposalData$
        .pipe(
            takeUntil(this.destroy$)
        )
        .subscribe(data => {
      this.budgetHTML = this.sanitizer.bypassSecurityTrustHtml(data?.budget_info);
    });     
    }

  /**
   * for importing budget data to database
   *
   * @return void
   */
  importBudget() {
    this.loadingUpload = true;
    
    if (this.budgetForm.valid) {      
      // convert formControl to FormData to allow sending images/files
      let formData = this.convertToFormData();      
      
      this.grantProposalId$.pipe(takeUntil(this.destroy$)).subscribe(id => {
        formData.set('grant_proposal_id', id);
      });
      
      this.grantProposalService
        .importBudgetTable(formData)
        .pipe(
          takeUntil(this.destroy$)
        )
        .subscribe({
          next: (res) => {
            this.showAlertDataSaved(res.results.message);
            this.initializedValues();
            this.initializeBudgetTable();
          },
          error: (err) => {
            this.showAlertSavingFailed(err.error.message);
            this.loadingUpload = false;
          },
          complete: () => {
            this.loadingUpload = false;
          }
        })
    } else {
      this.loadingUpload = false;
      this.showAlertCheckFields('Please fill in the required fields to proceed.');
    }
  }
}

核心问题是：上传文件后你虽然重新调用了初始化方法，但Redux Store里的grantProposalData$并没有更新，导致订阅回调没触发，budgetHTML自然不会刷新。

具体解决步骤： #

1. 上传成功后更新Store数据
   你需要在importBudget的next回调里，让Store同步最新的提案数据。如果后端返回的响应里包含更新后的budget_info，直接用这个数据更新Store；如果没有，就重新请求一次完整的提案详情。

   示例代码（假设你有更新Store的action和获取详情的服务方法）：

   next: (res) => {
     this.showAlertDataSaved(res.results.message);
     // 先拿到当前提案ID
     this.grantProposalId$.pipe(take(1)).subscribe(id => {
       // 请求最新的提案数据
       this.grantProposalService.getGrantProposal(id).pipe(takeUntil(this.destroy$)).subscribe(updatedData => {
         // 分发action更新Store
         this.store.dispatch(updateGrantProposal(updatedData));
       });
     });
     this.loadingUpload = false;
   },
   

2. 去掉冗余的初始化调用
   initializeBudgetTable里的订阅在组件初始化时已经建立，只要Store数据更新，订阅会自动触发并更新budgetHTML，所以上传成功后不需要重复调用initializedValues()和initializeBudgetTable()。

3. 优化grantProposalId$的异步处理
   当前代码里嵌套订阅容易出问题，改用switchMap简化逻辑：

   importBudget() {
     this.loadingUpload = true;
     if (this.budgetForm.valid) {
       let formData = this.convertToFormData();
       this.grantProposalId$.pipe(
         takeUntil(this.destroy$),
         switchMap(id => {
           formData.set('grant_proposal_id', id);
           // 先上传文件，再请求最新数据
           return this.grantProposalService.importBudgetTable(formData).pipe(
             switchMap(() => this.grantProposalService.getGrantProposal(id))
           );
         })
       ).subscribe({
         next: (updatedData) => {
           this.showAlertDataSaved('上传成功');
           this.store.dispatch(updateGrantProposal(updatedData));
           this.loadingUpload = false;
         },
         error: (err) => {
           this.showAlertSavingFailed(err.error.message);
           this.loadingUpload = false;
         }
       })
     } else {
       this.loadingUpload = false;
       this.showAlertCheckFields('请填写必填字段');
     }
   }
   

关键逻辑说明： #

Angular的视图更新依赖数据变化检测，当Store中的grantProposalData更新后，select(grantProposalSelector)会发出新值，触发initializeBudgetTable里的订阅回调，更新budgetHTML，最终自动刷新div内容。

内容的提问来源于stack exchange，提问作者lance2k