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

编码烧烤

问题:*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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Angular 2使用ngFor设置和绑定复选框

来自分类Dev

Angular 2使用ngFor设置和绑定复选框

来自分类Dev

在ngFor Angular 2中的输入类型复选框上设置检查状态

来自分类Dev

在ngFor Angular 2中的输入类型复选框上设置检查状态

来自分类Dev

ngFor Angular 6 中的 LINQ

来自分类Dev

Angular 6 - 使用 *ngFor 显示数据库中的数据

来自分类Dev

Angular 6:错误:找不到类型为“object”的不同支持对象“[object Object]”。NgFor 只支持绑定到 Iterables,比如 Array

来自分类Dev

Angular 6 + 为无序列表中的嵌套 ngFor 设置活动状态

来自分类Dev

ionic2 Angular 2绑定复选框,并在窗体内添加ngFor

来自分类Dev

Angular 6:存储在 *ngFor 中使用的值

来自分类Dev

Angular2 - 带有多个复选框的 NgFor

来自分类Dev

嵌套 ngFor 与双向数据绑定 Angular2

来自分类Dev

Angular 6 更新 *ngFor 数据,从下拉菜单中选择项目

来自分类Dev

Angular 2:下降顺序为ngFor

来自分类Dev

Angular 2:下降顺序为ngFor

来自分类Dev

Angular 4 ngFor 为元素设置类

来自分类Dev

ngFor元素上的Angular 2动画错误

来自分类Dev

ngFor元素上的Angular 2动画错误

来自分类Dev

用户单击后在 ngFor 中过滤:Angular 6

来自分类Dev

Angular 6+:从@input 在 ngFor 中传递数组名称

来自分类Dev

Angular 6 - 如何使用 *ngFor 从表中动态创建的输入框中获取 component.ts 中的输入值?

来自分类Dev

Angular 6 从另一个 ngFor 向 ngFor 元素添加活动类

来自分类Dev

如何访问由 *ngFor 循环索引的复选框的选中属性 - Angular

来自分类Dev

Angular / Typescript找不到类型为“对象”的其他支持对象“ [对象对象]”。NgFor仅支持绑定到数组等Iterables

来自分类Dev

Angular 找不到类型为“object”的不同支持对象“[object Object]”。NgFor 只支持绑定到 Iterables,比如 Arrays

来自分类Dev

如何禁用Angular 6中的特定动态复选框?

来自分类Dev

Angular 6 Reactive Forms 动态复选框

来自分类Dev

嵌套ngFor中的Angular 2 ngModel绑定

来自分类Dev

ngfor Angular材质中的图像绑定

Related 相关文章

  1. 1

    Angular 2使用ngFor设置和绑定复选框

  2. 2

    Angular 2使用ngFor设置和绑定复选框

  3. 3

    在ngFor Angular 2中的输入类型复选框上设置检查状态

  4. 4

    在ngFor Angular 2中的输入类型复选框上设置检查状态

  5. 5

    ngFor Angular 6 中的 LINQ

  6. 6

    Angular 6 - 使用 *ngFor 显示数据库中的数据

  7. 7

    Angular 6:错误:找不到类型为“object”的不同支持对象“[object Object]”。NgFor 只支持绑定到 Iterables,比如 Array

  8. 8

    Angular 6 + 为无序列表中的嵌套 ngFor 设置活动状态

  9. 9

    ionic2 Angular 2绑定复选框,并在窗体内添加ngFor

  10. 10

    Angular 6:存储在 *ngFor 中使用的值

  11. 11

    Angular2 - 带有多个复选框的 NgFor

  12. 12

    嵌套 ngFor 与双向数据绑定 Angular2

  13. 13

    Angular 6 更新 *ngFor 数据,从下拉菜单中选择项目

  14. 14

    Angular 2:下降顺序为ngFor

  15. 15

    Angular 2:下降顺序为ngFor

  16. 16

    Angular 4 ngFor 为元素设置类

  17. 17

    ngFor元素上的Angular 2动画错误

  18. 18

    ngFor元素上的Angular 2动画错误

  19. 19

    用户单击后在 ngFor 中过滤:Angular 6

  20. 20

    Angular 6+:从@input 在 ngFor 中传递数组名称

  21. 21

    Angular 6 - 如何使用 *ngFor 从表中动态创建的输入框中获取 component.ts 中的输入值?

  22. 22

    Angular 6 从另一个 ngFor 向 ngFor 元素添加活动类

  23. 23

    如何访问由 *ngFor 循环索引的复选框的选中属性 - Angular

  24. 24

    Angular / Typescript找不到类型为“对象”的其他支持对象“ [对象对象]”。NgFor仅支持绑定到数组等Iterables

  25. 25

    Angular 找不到类型为“object”的不同支持对象“[object Object]”。NgFor 只支持绑定到 Iterables,比如 Arrays

  26. 26

    如何禁用Angular 6中的特定动态复选框?

  27. 27

    Angular 6 Reactive Forms 动态复选框

  28. 28

    嵌套ngFor中的Angular 2 ngModel绑定

  29. 29

    ngfor Angular材质中的图像绑定

热门标签

归档