Javascript 在Angular 6上启用输入类型复选框内的双向数据绑定*ngFor

问题：*ngFor指令中复选框的双向数据绑定

我有一个模板驱动的表单，在这个表单中，我使用*ngFor在几个单选按钮上循环。基于一个键，我在页面加载时在处于禁用状态的单选按钮旁边显示复选框。若用户点击一个单选按钮，若它有一个对应的复选框，我将启用它的状态。然后我可以点击复选框

但是，我希望能够禁用previous复选框，并在用户单击另一个单选按钮时重置其值，从而传递正确的表单值。（我在beloe代码演示url中将它们显示为json）

演示代码示例：

如果您看到演示代码，我应该能够重置复选框，如果我在“惊奇英雄”和“Dc英雄”之间切换

---

感谢您的时间和建议。

您不能简单地将

checked

属性设置为false，因为这会将content

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

    });

  }

---

您不能简单地将

checked

属性设置为false，因为这会将content

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

    });

  }

---

谢谢你@Randy Casburn，这确实是我错过的东西。你的一段代码是不言自明的，唯一的问题是我不能把逻辑联系起来。再次感谢您的时间。@noobcode-我本来打算分享一个到规范的链接，讨论这个工作方式，但这更让人困惑！基本上，每个输入控件中都有两个不同的指示来记录它们的状态。它们与几乎所有类型的输入控件都是同步的，所以这不是问题。布尔输入（复选框是一个）有这种奇怪的工作方式。谢谢@Randy Casburn，这确实是我遗漏的东西。你的一段代码是不言自明的，唯一的问题是我不能把逻辑联系起来。再次感谢您的时间。@noobcode-我本来打算分享一个到规范的链接，讨论这个工作方式，但这更让人困惑！基本上，每个输入控件中都有两个不同的指示来记录它们的状态。它们与几乎所有类型的输入控件都是同步的，所以这不是问题。布尔输入（复选框是其中之一）有这种奇怪的工作方式。