Angular2 - 带有多个复选框的 NgFor

没有名字的男人

我正在尝试创建一个表,该表具有多个具有不同状态的复选框(有些为真,有些为假)。

在这个表中,我有“保存”按钮来获取他状态的所有元素。

代码是这样的:

<form #form="ngForm" (ngSubmit)="save(form)">
  <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger"
         class="table table-hover table-bordered table-striped">
    <thead>
      <tr>
        <th>{{'name-placeholder' | translate}}</th>
        <th>{{'action' | translate}}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let card of cardsDashboard;let i=index">
        <td>{{card.text}}</td>
        <td>
          <div class="form-check">
            <label>
              <input type="checkbox" name="checkDashboard" [(ngModel)]="card[i]"
                     (ngModelChange)="card[i].activate==true?'true':'false'" [checked]="card.activate">
              <span class="label-text"></span>
            </label>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  <div class="btn-toolbar pull-right ">
    <div class="btn-group">
      <button class="btn btn-primary">{{'save' | translate}}</button>
    </div>
  </div>
</form>

第一个问题:“保存”按钮不会更新元素的状态。

第二个问题:复选框不显示默认状态。复选框为空。

所以问题是:如何使用复选框执行 ngfor 并显示状态并更新它?

----更新:阵列-----

0:
activate: true
cardType: 1
id: 1
text: "Contadores"
__proto__: Object
1: {id: 2, text: "Alarmas", cardType: 2, activate: false}
2: {id: 3, text: "Consumo día anterior", cardType: 3, activate: false}
3: {id: 4, text: "Consumo del mes anterior", cardType: 4, activate: false}
4: {id: 5, text: "Elementos instalados la ultima semana", cardType: 5, activate: false}
5: {id: 6, text: "Elementos que han comunicado hoy", cardType: 6, activate: false}
埃利塞奥

更新我觉得有点傻::glups::

[(ngModel)]="card[i].activate" //<--WRONG

[(ngModel)]="card.activate" //<--OK

忘记(ngModelChange)和[检查]。

看问题,你真的没有再赚

通常,我们可以做两件事:

数组中的值,例如 values=["uno","tres"] 或 values=[true,false,true,false] "checked options"=["​​uno","dos","tres" 列表,"cuatro"]

所以,在一个数组中,我们可以有

this.options.forEach((x,index)=>{
   this.card[index].activate=value[index]
   //or 
   //   this.card[index].activate=value.indexOf(x)>=0

})

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

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

来自分类Dev

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

来自分类Dev

Angular2中带有ngFor的ngControl

来自分类Dev

Angular2:<li>带有* ngFor不在<ul>内

来自分类Dev

带有ngFor元素的ngModel的动态angular2形式

来自分类Dev

带有* ngFor的Angular2奇怪的表单行为

来自分类Dev

Angular2是否可以使用带有复选框的双向绑定?

来自分类Dev

Angular2 ngFor-如果没有值则跳过

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

Angular2 :: NgFor ::承诺

来自分类Dev

groupby ngFor angular2

来自分类Dev

AngularJS多个复选框有疑问(Angular Material)

来自分类Dev

AngularJS多个复选框有疑问(Angular Material)

来自分类Dev

JSF-2选择/取消选择所有带有复选框的复选框列表

来自分类Dev

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

来自分类Dev

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

来自分类Dev

Angular2中的Ng-repeat-start-也使用NgFor重复多个元素

来自分类Dev

如何使用ngFor在angular2中加载多个子组件?

来自分类Dev

如何使用多个ngFor解析angular2中的json文件?

来自分类Dev

如何在angular2的for循环中选择多个复选框?

来自分类Dev

* ngFor中的角度复选框

来自分类Dev

带有复选框的Angular 2动态表单不起作用?

来自分类Dev

Angular 2:带有复选框的数组无法正常工作

来自分类Dev

Angular中的多个复选框

来自分类Dev

Angular2 ngModel针对ngFor变量

来自分类Dev

Angular2 ngFor父元素

来自分类Dev

Angular2:ngFor和条件类

Related 相关文章

  1. 1

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

  2. 2

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

  3. 3

    Angular2中带有ngFor的ngControl

  4. 4

    Angular2:<li>带有* ngFor不在<ul>内

  5. 5

    带有ngFor元素的ngModel的动态angular2形式

  6. 6

    带有* ngFor的Angular2奇怪的表单行为

  7. 7

    Angular2是否可以使用带有复选框的双向绑定?

  8. 8

    Angular2 ngFor-如果没有值则跳过

  9. 9

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

  10. 10

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

  11. 11

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

  12. 12

    Angular2 :: NgFor ::承诺

  13. 13

    groupby ngFor angular2

  14. 14

    AngularJS多个复选框有疑问(Angular Material)

  15. 15

    AngularJS多个复选框有疑问(Angular Material)

  16. 16

    JSF-2选择/取消选择所有带有复选框的复选框列表

  17. 17

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

  18. 18

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

  19. 19

    Angular2中的Ng-repeat-start-也使用NgFor重复多个元素

  20. 20

    如何使用ngFor在angular2中加载多个子组件?

  21. 21

    如何使用多个ngFor解析angular2中的json文件?

  22. 22

    如何在angular2的for循环中选择多个复选框?

  23. 23

    * ngFor中的角度复选框

  24. 24

    带有复选框的Angular 2动态表单不起作用?

  25. 25

    Angular 2:带有复选框的数组无法正常工作

  26. 26

    Angular中的多个复选框

  27. 27

    Angular2 ngModel针对ngFor变量

  28. 28

    Angular2 ngFor父元素

  29. 29

    Angular2:ngFor和条件类

热门标签

归档