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

Question

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

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

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

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

如果你看到演示代码，我应该能够在 "Marvel Heroes" 和 "Dc Heroes"

之间切换时重置复选框

感谢您的宝贵时间和建议。

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

    });

  }

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

Enable Two-Way data binding on Angular 6 for input type checkbox inside *ngFor

javascript

angular-cli

angular

two-way-binding

angular-cli-v6