Angular 2如何动态绑定复选框并在单击提交按钮时返回选中的复选框ID答案

【问题标题】：Angular 2 How to bind the checkbox dynamically and return checked checkbox id's when Submit button is clickedAngular 2如何动态绑定复选框并在单击提交按钮时返回选中的复选框ID
【发布时间】：2019-06-12 18:29:08
【问题描述】：

我有一个如下所示的 JSON 数据，

[  
         {  
            "id":1,
            "applicationId":1,
            "permissions":"Edit"
         },
         {  
            "id":2,
            "applicationId":1,
            "permissions":"View"
         }
]

现在我需要为数据“权限”动态绑定复选框，并且在 HTML 中有一个按钮要提交，当我点击提交按钮时，我需要所有已签入的 applicationId一个数组。

如何在 Angular 中实现这一点？

【问题讨论】：

检查这个：coryrylan.com/blog/creating-a-dynamic-checkbox-list-in-angular
到目前为止您尝试过什么？向我们展示您的 Angular 代码
在这里发布您的代码@Chandan..

标签： json angular checkbox dynamic

【解决方案1】：

我猜你需要有与数组长度一样多的复选框。

您可以使用 ngFor 迭代列表并将所选项目的状态保存在单独的数组中。

  checked = [];

  data = [  
         {  
            "id":1,
            "applicationId":1,
            "permissions":"Edit"
         },
         {  
            "id":2,
            "applicationId":1,
            "permissions":"View"
         }
  ];

  checkItem(item) {
    const idx = this.checked.indexOf(item);
    idx >= 0 ? this.checked.splice(idx, 1) : this.checked.push(item);
  }

  submitData() {
    const applicationIds = this.checked.map(it => it.applicationId);
    console.log(applicationIds);
  }

并且模板类似于

<ul>
  <li *ngFor="let item of data">
    {{item.permissions}} <input type="checkbox" (change)="checkItem(item)">
  </li>
</ul>

<button type="button" (click)="submitData()">Submit</button>

【讨论】：