为什么Ioniccheckbox不总是刷新Android上的视图

我正在编写一个使用Ionic的混合应用程序，带有独立的模块和 capacitor (请注意，我是个新手，所以并不是所有的东西都是完美的).我在浏览器中测试时不会出现复选框问题，但在真正的Android设备上会出现.

Background and code个

我有一个名为"new-view"的页面组件，它允许创建新的医疗访问或更新现有的医疗访问.根据url参数，我可以使用默认值创建表单，也可以使用现有访问中的数据填充表单.

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')!;
  }

// ...

然后，在UI端的Form元素中，我有一个复选框允许 Select 客户是支付了整个访问的费用还是欠了一些债务.根据复选框的值，我要么显示用于编辑债务金额的文本框，要么不显示.

<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>

The issue个

当我在浏览器中运行ng serve的应用程序时，一切都运行正常.当我将复选框标记为选中时，字段可见，否则不可见.

然而，在Android上，它只有在创建新的访问时才起作用.当我try 编辑现有的复选框时，它会随机停止工作-我可以更改复选框值，并且我可以看到复选框本身的视觉效果，但在最小化应用程序之前，"ngIf"部分不起作用.它似乎只在最小化应用程序的时刻触发"ngif".