Angular 7 How to push dynamic objects to array

How to push that highlighted object to accessRights array(as in picture1). Multiple object can be added to the accessRights array. Each Permission (row) has unique resourceId and each checkbox has unique id. When user select 2 checkboxes in permission 1 (as in picture2). its should create first object in accessRights array as in picture 1. it will be add second object when user select any checkbox permission 2.

Picture 1

Picture 2

Here is my some code app.html

<mat-list role="list">
  <mat-list-item *ngFor="let child of subTab.resources" role="listitem">
    <div class="list permission-list">
      
    </div>
    <ng-container *ngFor="let list of child.permission">
      <mat-checkbox [value]="list.id" [checked]="getApi(list.id)" class="list checkbox-list" (change)="setApi(list.id, $event)"></mat-checkbox>
    </ng-container>
  </mat-list-item>
</mat-list>

app.ts

export class UserPermissionComponent implements OnInit {

  group: Group = {
    existingPermissions: []
  };
  apiMap: Map < any,
  boolean > ;
  checkAllMap: Map < string,
  string[] > ;
  public parentTab;
  public subTab;
  groupCode: any;
  private sub: any;

  getApi(id) {
    return this.apiMap.get(id);
  }

  setApi(id, event, code) {
    this.apiMap.set(id, event.checked);
  }

  ngOnInit() {}

  loadPermissionList(doNext: Function) {
    this.userManagementService.getEapPermissionList()
      .subscribe((response: any) => {
        console.log('permission', response.accessData);
        this.apiMap = new Map();
        this.checkAllMap = new Map();
        response.accessData
          .forEach(res => res.subTabs
            .forEach(subtab => subtab.resources
              .forEach(child => child.permission
                .forEach(list => {
                  this.apiMap.set(list.id, false);
                  this.buildCheckAllMap(list);
                }))));
        doNext.bind(this)();
        this.parentTab = response;
        console.log('permission2', this.parentTab);

      })
  }

  buildCheckAllMap(permission: {
    name,
    id
  }) {
    if (!this.checkAllMap.get(permission.name)) {
      this.checkAllMap.set(permission.name, [permission.id]);
    } else {
      this.checkAllMap.get(permission.name).push(permission.id);
    }
  }

  checkAll(name, event): void {
    if (!name) {
      return;
    }
    this.checkAllMap.forEach((v, k) => {
      if (k === name) {
        v.forEach(id => {
          this.apiMap.set(id, event.checked)
        });
      }
    });
  }

  save() {
    this.apiMap.forEach((v, k) => {
      const index = this.group.existingPermissions.indexOf(k);
      if (!!v) {
        if (index < 0) {
          this.group.existingPermissions.push(k);
        }
      } else {
        if (index > -1) {
          this.group.existingPermissions.splice(index, 1);
        }
      }
    });
    console.log(this.group);
  }
}