Question

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

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

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

如何在Angular中实现这一目标？

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

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

1 个答案: