为* ngFor

Question

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

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

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

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

如果您看到了演示代码，那么当我在“漫威英雄”和“直流英雄”之间切换时，我应该能够重置该复选框。

感谢您的时间和建议。

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

    });

  }