[选中] 应用于垫单选按钮时 OnChange 不起作用

Question

我有问题。我第一次尝试根据金额选择一个复选框。我为此应用了 [checked] with function。但是在那之后（更改）不起作用你知道为什么吗？

这是 html 的代码：

 <mat-radio-group (change)="radioButtonOnChange($event)" formControlName="anticipatedPaymentOrInstallmentAdvance">
                <td td-data-table-cell>
                  <mat-radio-button id='anticipatedPayment' value="ANTICIPATED_PAYMENT" [checked]="isTwiceInstallment()">
                    {{ 'Anticipated Payment' | translate }}
                  </mat-radio-button>
                </td>
                <td td-data-table-cell>
                  <mat-radio-button id='installmentAdvance' value="INSTALLMENT_ADVANCE" [checked]="!isTwiceInstallment()" [disabled]="disableInstallmentAdvance">
                    {{ 'Installment Advance' | translate }}
                  </mat-radio-button>
                </td>
              </mat-radio-group>

这是 TS 的代码

isTwiceInstallment() {
    const overPaidAmount = this.transactionTotal - +this.nextPayment;
    const isOverPaid = overPaidAmount > 0.00;
    const isTwoTimesInstallment = this.transactionTotal >= (2 * +this.nextPayment);
    if (isTwoTimesInstallment && isOverPaid) {
      this.form.get('anticipatedPaymentOrInstallmentAdvance').setValue('ANTICIPATED_PAYMENT');
      this.disableAnticipatedPaymentDropDown = false;
      return true;
    } else {
      this.form.get('anticipatedPaymentOrInstallmentAdvance').setValue('INSTALLMENT_ADVANCE');
      this.disableAnticipatedPaymentDropDown = true;
      return false;
    }
  }
 radioButtonOnChange(event: any) {
    if (event.value === 'ANTICIPATED_PAYMENT' ) {
      this.disableAnticipatedPaymentDropDown = false;
      this.form.get('anticipatedPaymentOrInstallmentAdvance').setValue(event.value);
    }
    if (event.value === 'INSTALLMENT_ADVANCE') {
      this.disableAnticipatedPaymentDropDown = true;
      this.form.get('anticipatedPaymentOrInstallmentAdvance').setValue(event.value);
    }
  }

Answer 1

你的 isTwiceInstallment() 函数在你的模板中有它时会不断被调用，因此你似乎无法更改值，因为它基本上覆盖了你正在尝试做的事情。而不是在模板中调用该函数（实际上不建议在模板中调用函数，因为它们会影响性能......），只需在适当的时间（在构建表单之后？）调用你在 isTwiceInstallment() 中所做的检查isTwiceInstallment 一次，到此为止。那么你的更改事件就可以正常工作了。

所以像这样...

buildForm() {
  // build your form first here...
  isTwiceInstallment() // call function after that...
}

并从您的模板中删除函数调用。

[选中] 应用于垫单选按钮时 OnChange 不起作用

OnChange doesnt work when [checked] apply in mat radio button

angular-directive

angular-material

angular