How to set Checkbox FormControl for Multiple array control

问题

I am trying toggle/check according specific permissions with array set id's - to set permissions for users according to their user role. for an example an admin would have permissions to create users, delete, and update. My struggle with the code i've posted below is that it toggles all permissions instead of ones passed into formControl im not sure if im doing right.

public userList: Array < User > ;
public principalList: Array < Principal > ;
public permissionList: Array < PermissionItem > ;
public groupPermissionList: Array < PermissionGroup > ;
public permIdArr: Array < number > = [];
public permGrpIdArr: Array < number > = [];
public isSelected = false;

public updatePermsList(ev, id: number) {
  console.log(ev.target.checked, id);
  if (ev.target.checked) {
    this.permIdArr.push(id);
    console.log(this.permIdArr);
  } else {
    this.permIdArr = this.permIdArr.filter(pId => {
      return pId !== id;
    });
  }
}

public updateGrpPermsList(event, id: number) {
  if (id === 1) {
    let grpid;
    this.groupPermissionList.map(i => {
      const per = i.permissions;
      per.forEach(e => {
        grpid = e.id;
        this.permGrpIdArr.push(grpid);
      });
    });
  } else if (id === 2) {
    console.log('2nd');
  } else {
    console.log('3rd');
  }
  this.createNewUserForm.controls['app_user_permissions'].setValue(this.permGrpIdArr);
}

<div class="user-new-container p24">
  <div [class.updating]="submitting">
    <form [formGroup]="createNewUserForm" (ngSubmit)="onSubmit(createNewUserForm.value)" class="updater">
      <div class="row">
        <div class="col-lg-6">
          <div *ngIf="groupPermissionList" class="row perms">
            <div class="col-lg-12">

              <h3 class="mb24">Group Permissions</h3>

              <div class="row">
                <div *ngFor="let p of groupPermissionList;let i = index" class="col-lg-4">

                  <div class="form-group row">
                    <div class="col-lg-6 col-sm-10 col-xs-10 toggle-switch">
                      <input (click)="updateGrpPermsList($event, p.id)" value="p.id" type="checkbox" id="permGrp_{{i}}">
                      <label for="permGrp_{{i}}">{{p.name}}</label>
                    </div>
                  </div>

                </div>
              </div>

            </div>
          </div>
          <br>

          <div *ngIf="permissionList" class="row perms">
            <div class="col-lg-12">

              <h3 class="mb24">Permissions</h3>

              <div class="row">
                <div *ngFor="let p of permissionList;let idx = index" class="col-lg-4">

                  <div class="form-group row">

                    <div class="col-lg-6 col-sm-10 col-xs-10 toggle-switch">
                      <input (change)="updatePermsList($event, p.id)" formControlName="app_user_permissions" type="checkbox" [checked]="val" id="perm_{{idx}}">
                      <label for="perm_{{idx}}">{{p.name}}</label>
                    </div>
                  </div>

                </div>
              </div>

            </div>
          </div>
    </form>
    </div>
    </div>

来源：https://stackoverflow.com/questions/51867855/how-to-set-checkbox-formcontrol-for-multiple-array-control