Ionic复选框在Android设备编辑模式下视图无法实时刷新的问题求助

大家好，我是刚接触Ionic+Capacitor+独立模块开发的新手，最近开发一个医疗访问记录的混合APP时遇到了一个奇怪的问题，浏览器测试完全正常，但在真实Android设备上就出状况了，想请各位帮忙分析下。

背景与代码说明 #

我做了一个名为new-visit的页面组件，支持新建医疗访问记录和编辑已有记录，会根据URL参数来决定是初始化默认表单，还是填充已有记录的数据。

组件TS代码 #

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, NavController } from '@angular/router';
import { ToastController, MenuController } from '@ionic/angular';
import moment from 'moment';
import { VisitModel } from '../models/visit.model';
import { CustomerDetails } from '../models/customer.model';
import { VisitsService } from '../services/visits.service';
import { CustomersService } from '../services/customers.service';
import { addIcons } from 'ionicons';
import { icons } from '../icons';

@Component({
  selector: 'app-new-visit',
  templateUrl: './new-visit.page.html',
  styleUrls: ['./new-visit.page.scss'],
})
export class NewVisitPage implements OnInit {

  editMode: boolean = false;
  private existingVisit: VisitModel | undefined = undefined;
  private customers: CustomerDetails[] = [];
  public selectedCustomer: CustomerDetails | null = null;
  public customerSearchField: FormControl;
  public allowCustomerChange: boolean = true;

  constructor(
    private formBuilder: FormBuilder,
    private visitService: VisitsService,
    private route: ActivatedRoute,
    private customersService: CustomersService,
    private navCtrl: NavController,
    private toastCtrl: ToastController,
    private menuCtrl: MenuController
  ) {
    this.customerSearchField = new FormControl('');
  }

  visitDataForm: FormGroup = this.formBuilder.group({
    customerId: ['', Validators.required],
    medicines: '',
    description: '',
    date: [moment().format('YYYY-MM-DD'), Validators.required],
    amount: 0,
    hasDebt: false,
    debtAmount: 0,
    debtPaidAmount: 0
  })

  ngOnInit() {
    addIcons(icons);
    this.visitDataForm.reset();

    this.route.queryParamMap.subscribe(params => {
      const customerId = params.get('customerId');
      if (customerId) {
        this.selectedCustomer = this.customersService.getCustomerById(customerId);
        this.customerId?.setValue(customerId);
        this.allowCustomerChange = false;
      }
    })

    this.route.paramMap.subscribe(params => {
      let date = params.get('date');
      if (date) {
        this.visitDataForm.get('date')!.setValue(date)
      }

      let id = params.get('id');
      if (id) {
        this.editMode = true;
        this.existingVisit = this.visitService.getById(id);
        if (!this.existingVisit)
          throw 'visit not found';

        this.visitDataForm.get('customerId')?.setValue(this.existingVisit.customerDetails.id);
        this.visitDataForm.get('medicines')?.setValue(this.existingVisit.medicines);
        this.visitDataForm.get('description')?.setValue(this.existingVisit.description);
        this.visitDataForm.get('date')?.setValue(moment(this.existingVisit.date).format('YYYY-MM-DD'));
        this.visitDataForm.get('amount')?.setValue(this.existingVisit.amount);
        this.visitDataForm.get('hasDebt')?.setValue(!!this.existingVisit.debt);
        this.visitDataForm.get('debtAmount')?.setValue(this.existingVisit.debt?.amount || 0);
        this.visitDataForm.get('debtPaidAmount')?.setValue(this.existingVisit.debt?.amountPaid || 0);

        this.selectedCustomer = this.customersService.getCustomerById(this.existingVisit.customerDetails.id);
      }
    });
  }

  get hasDebt() {
    return this.visitDataForm.get('hasDebt')!.value;
  }

  get customerId() {
    return this.visitDataForm.get('customerId')!;
  }

  // 其他业务逻辑方法...
}

页面HTML代码 #

<form [formGroup]="visitDataForm">
  <!-- 其他表单元素 -->

  <ion-item lines="full">
    <ion-checkbox labelPlacement="end" formControlName="hasDebt">
      <div class="ion-text-wrap">Amount was not fully paid</div>
    </ion-checkbox>
  </ion-item>

  <ion-item *ngIf="hasDebt">
    <ion-label position="floating">Debt amount</ion-label>
    <ion-input type="number" step="0.01" min="0" formControlName="debtAmount"></ion-input>
  </ion-item>

  <ion-item *ngIf="hasDebt && editMode">
    <ion-label position="floating">Paid amount</ion-label>
    <ion-input type="number" step="0.01" min="0" formControlName="debtPaidAmount"></ion-input>
  </ion-item>

  <!-- 提交按钮等 -->
</form>

问题现象 #

• 在浏览器用ng serve测试时，一切正常：勾选复选框后，债务金额相关的输入框会立刻显示；取消勾选则立刻隐藏。
• 但在真实Android设备上，只有新建记录时功能正常；进入编辑已有记录的模式后，问题就出现了：我点击复选框时，能看到复选框本身的状态变化（打勾/取消），但*ngIf控制的输入框完全没反应，直到我把APP最小化再重新打开，输入框才会根据当前复选框状态显示或隐藏。

我自己排查时，打印hasDebt的值发现它是跟着复选框实时变化的，但视图就是不更新，只有切后台再回来才触发刷新，实在搞不懂哪里出问题了，求各位大佬指点！

备注：内容来源于stack exchange，提问作者PJDev