当 [选中] 应用于垫单选按钮时,OnChange 不起作用
Posted
技术标签:
【中文标题】当 [选中] 应用于垫单选按钮时,OnChange 不起作用【英文标题】:OnChange doesnt work when [checked] apply in mat radio button 【发布时间】:2021-12-14 11:02:29 【问题描述】:我有问题。我第一次尝试根据金额选择一个复选框。我为此应用了 [checked] 功能。但是在那之后(更改)不起作用你知道为什么吗?
这是 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);
【问题讨论】:
【参考方案1】:当您的模板中有 isTwiceInstallment()
函数时,它会不断被调用,因此您似乎无法更改值,因为它基本上会覆盖您正在尝试执行的操作。不要在模板中调用该函数(实际上不建议在模板中调用函数,因为它们会影响性能......),只需在适当的时间(在构建表单之后?)调用@987654323 @一次,然后就离开它。然后你的更改事件就可以正常工作了。
所以像这样......
buildForm()
// build your form first here...
isTwiceInstallment() // call function after that...
并从模板中删除函数调用。
【讨论】:
你是对的......它正在工作......感谢您的帮助以上是关于当 [选中] 应用于垫单选按钮时,OnChange 不起作用的主要内容,如果未能解决你的问题,请参考以下文章
如何在UnChecked时触发单选按钮的OnChange事件