使用复选框更改ngModel值

Question

good day .. I have this code and I need to send the role..but when I select the checkbox the ngModel changes to True or False and it is what is sent to the DB..How can I solve it?

<mdl-checkbox class="mdl-textfield--full-width" *ngFor="let role of roles; let i = index"
[(ngModel)]="user.roles[i] " name="ckb{{i}}">
{{role.name}}
</mdl-checkbox>

Answer 1

Hard to say with only template. But it might be that you are overwriting the data if you are sending user, since you are using [(ngModel)]="user.roles[i]" on your checkbox, you are altering that value by clicking on the checkbox. You can create an item on the roles array by doing role.isChecked . Then you can store the checked state.

Answer 2

I would suggest altering your object.

public class Role {
    id: number;
    name: string;
    enabled: boolean;
}

<mdl-checkbox class="mdl-textfield--full-width" *ngFor="let role of roles; let i = index" [(ngModel)]="user.roles[i].Enabled" name="ckb{{i}}">
    {{role.name}}
</mdl-checkbox>

Answer 3

May be you can set user roles in change event? Like (change)="userRoles[i] = role" A sample plunkr using Angular only:

https://plnkr.co/edit/erIQNgk6u1JxOc6zCoHW?p=preview