angular2中的多个复选框值

Question

我有一个用户模型和一个角色模型。 我想使用http put请求中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值。

希望这会帮助你。 :)