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值。

希望這會幫助你。 :)