在 Angular 6 上为 *ngFor 中的输入类型复选框启用双向数据绑定答案

【问题标题】：Enable Two-Way data binding on Angular 6 for input type checkbox inside *ngFor在 Angular 6 上为 *ngFor 中的输入类型复选框启用双向数据绑定
【发布时间】：2018-11-02 04:25:28
【问题描述】：

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

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

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

演示代码示例：https://stackblitz.com/edit/angular-ba8pfz

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

感谢您的时间和建议。

【问题讨论】：

标签： javascript angular angular-cli angular-cli-v6 two-way-binding

【解决方案1】：

您不能简单地将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;
      }

    });

  }

【讨论】：

谢谢@Randy Casburn，这确实是我所缺少的。你的代码是不言自明的，唯一的问题是我无法关联逻辑。再次感谢您的宝贵时间。
@noobcode - 我打算分享一个讨论其工作方式的规范链接，但这更令人困惑！基本上，每个输入控件都有两个不同的指示来记录它们的状态。它们与几乎所有类型的输入控制同步——所以这不是问题。布尔输入（复选框之一）具有这种奇怪的工作方式。