[英]Enable Two-Way data binding on Angular 6 for input type checkbox inside *ngFor
问题:* ngFor指令中复选框的双向数据绑定
我有一个模板驱动的表单,其中使用* ngFor循环几个单选按钮。 基于一个键,在页面加载时处于禁用状态的单选按钮旁边会显示复选框。 如果用户单击单选按钮,并且具有相应的复选框,则启用其状态。 然后,我可以单击复选框。
但是,我希望能够禁用上一个复选框并在用户单击另一个单选按钮时重置其值,从而传递正确的表单值。 (我将它们显示为beloe代码演示url中的json)
演示代码示例: https : //stackblitz.com/edit/angular-ba8pfz
如果您看到了演示代码,并且在“ Marvel Heroes”和“ Dc Heroes”之间切换,则应该能够重置该复选框
感谢您的时间和建议。
您不能简单地将checked
属性设置为false,因为将内容checked
属性设置为空字符串-等同于true或checked。 因此,复选标记消失了,但是控件的布尔状态没有改变。 必须更改控件的布尔状态。 一种简单的方法是在控件上生成单击或更改事件。
尝试这个:
enableRecursive(event, recursiveChk: boolean) {
let clickEvent = new MouseEvent('click');
this.recursiveChk.map((elem) => {
if (elem.nativeElement.checked) {
elem.nativeElement.dispatchEvent(clickEvent);
}
elem.nativeElement.disabled = true;
if (`recursive_${event.target.id}` === elem.nativeElement.id) {
elem.nativeElement.disabled = false;
}
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.