问题:*ngFor 指令中复选框的双向数据绑定
我有一个模板驱动的表单,我使用 *ngFor 来循环几个单选按钮。基于一个键,我在页面加载时显示处于禁用状态的单选按钮旁边的复选框。如果用户点击一个单选按钮并且它有一个相应的复选框,我会启用它的状态。然后我可以点击复选框。
但是,我希望能够在用户单击另一个单选按钮时禁用上一个复选框并重置其值,从而传递正确的表单值。(我在 beloe 代码演示网址中将它们显示为 json)
演示代码示例:https : //stackblitz.com/edit/angular-ba8pfz
如果您看到演示代码,如果我在“Marvel Heroes”和“Dc Heroes”之间切换,我应该能够重置复选框
感谢您的时间和建议。
您不能简单地将checked
属性设置为 false,因为这checked
会将内容属性设置为空字符串 - 这相当于 true 或已检查。因此复选标记消失,但控件的布尔状态没有改变。必须改变控件的布尔状态。一种简单的方法是在控件上生成单击或更改事件。
试试这个:
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;
}
});
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句