如何为多数组控件设置复选框FormControl

Question

我正在尝试使用数组集ID的特定权限切换/检查-根据用户角色为用户设置权限。例如，管理员将有权创建用户，删除和更新。我在下面发布的代码中遇到的麻烦是，它切换了所有权限，而不是传递给formControl的权限，我不确定即时通讯是否操作正确。

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>