angular2中的多个Checkbox值

Question

我有一个用户模型和一个角色模型。我想使用http放置请求中的angular2中的复选框将角色的值发送到db。我有一个表user_role，我想将role_id发送到该表。因为我正在获取所有角色并在html中显示如下：

 <a *ngFor="let role of roles">
   <input type="checkbox" [value]="role.name" [(ngModel)]="user.role_id" [ngModelOptions]="{standalone: true}"/>&nbsp;<b>{{role.name}}</b>
 </a>

现在我想，如果我要检查多个复选框，多个值应该进入数据库。我是angular2的新手。有人可以帮我解决这个问题吗？

Answer 1

我已经创建了一个示例演示，您可以在其中了解如何将多个复选框值发送到服务器

这是我的.ts文件代码

roles: Array<String> = [
{
  "name":"qa",
  "isSelected": false
},
{
  "name":"developer",
  "isSelected": false
},
{
  "name":"manager",
  "isSelected": false
},
{
  "name":"BA",
  "isSelected": false
},];
sendDataToServer() {
alert(JSON.stringify(this.roles)); }

我有一个json角色和一个函数sendDataToServer，它显示了要在服务器上发送的最终json

这是我的.html代码

 <a *ngFor="let role of roles">
 <input type="checkbox" [value]="role.name" [(ngModel)]="role.isSelected"        [ngModelOptions]="{standalone: true}"/>&nbsp;<b>{{role.name}}</b>
 </a>
<br><br>
<input type="button" value="Send Data On Server "    (click)="sendDataToServer()"/>

所以我有4个复选框，我将这些复选框与json的isSelcted属性绑定。用户单击复选框后，值会将false更改为true。

当用户点击sendDataToServer按钮时，我们会有更新的isSelected值。

希望这会帮助你。 :)