javascript - Angular 4 kontrollera flera kryssrutor

Jag har ett formulär med användarroller som visas som flera kryssrutor:

<div *ngFor="let role of roles">
            <label for="role_{{role.id}}">
              <input type="checkbox" ngModel name="roles" id="role_{{role.id}}" value="{{role.id}}"> {{role.name}} &nbsp;&nbsp;
            </label>
          </div>

roller-objektet som laddats från servern ser ut så här och innehåller alla roller som visas på formuläret:

{id: 1, name: "HQ", description: "A Employee User", created_at: "2017-10-07 10:43:17",…}
1
:
{id: 2, name: "admin", description: "A Manager User", created_at: "2017-10-07 10:43:17",…}
2
:
{id: 3, name: "caretaker", description: "", created_at: null, updated_at: null}

nu vill jag ställa in flera kryssrutor med form.setValue, mitt användarobjekt som laddas från servern ser ut så här: "roles" i användarobjektet är de roller som är tilldelade användaren och som behöver kryssas i formuläret

{
"id":13,
"name":"Wasif Khalil",
"email":"[email ",
"created_at":"2017-10-07 10:43:17",
"updated_at":"2017-10-09 07:45:34",
"api_token":"LKVCGPGnXZ3LyiCnyiTAg8XTpck6xWlVkeoMBgtoYZWoAOy4b5epNqMz7KG7",
"roles":[
     {"id":2,"name":"admin","description":"A Manager User","created_at":"2017-10-07 10:43:17","updated_at":"2017-10-07 10:43:17","pivot":{"user_id":"13","role_id":"2","created_at":"2017-10-07 10:43:17","updated_at":"2017-10-07 10:43:17"}
     },
     {"id":1,"name":"HQ","description":"A Employee User","created_at":"2017-10-07 10:43:17","updated_at":"2017-10-07 10:43:17","pivot":{"user_id":"13","role_id":"1","created_at":null,"updated_at":null}
     }
   ]
}

efter att ha laddat användarobjektet från servern sätter jag värden så här:

this.form.setValue({
                        name: user.name,
                        email: user.email,
                        password:"",
                        confirm_password:"",
                        roles: [1] //here im not sure how to set roles
                    });

kan någon hjälpa mig att markera kryssrutorna med det laddade användarroller-objektet. Tack på förhand

REDIGERA: Förlåt för att jag inte förklarade det bra, jag har redigerat min fråga för att förklara frågan igen: rollerna på användarobjektet är de roller som är tilldelade användaren och rollerna i objektet är listan över alla roller att visa i formuläret, titta på bilden nedan:

Svar #1

Du behöver inte använda reaktiva formulär för att få det gjort.

HTML

  <input ...[checked]="check(user.roles,role.id)" ...>

Typescript:

check(value1, value2){
  return (value1.filter(item => item.id == value2)).length
}

DEMO