複数のチェックボックスの値が角度2

Question

私は1つのユーザーモデルと1つのロールモデルを持っています。 http putリクエストでangular2のチェックボックスを使ってdbにroleの値を送りたい。 1つのテーブル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ファイルのコードは、私がJSONに役割を持っている

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)); } 

あるsendDataToServerは、サーバー上で送信される最後のjsonを表示します。

ここに

<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プロパティでこれらのチェックボックスをバインドしている私の.htmlのコードです。ユーザーがチェックボックスをクリックすると、値はfalseに変更されます。

ユーザーがsendDataToServerボタンをクリックすると、が更新され、が選択された値になります。

希望すると、これが役立ちます。 :)