Typescript - Флажки привязки к паре ключ-значение - PullRequest
Новая
       32

Typescript - Флажки привязки к паре ключ-значение

0 голосов
/ 28 сентября 2018

У меня есть объект машинописного текста, полученный из API, который содержит массив второго объекта.Этот второй объект содержит пару ключ-значение типа { [key: string]: boolean }.

. Как вы можете сказать, многомерный массив логических значений может расти как вертикально, так и горизонтально.Я пытаюсь создать двустороннюю привязку к логическим значениям с соответствующим массивом флажков.

Я успешно установил начальные значения флажков на основе привязки, но после манипулирования значениями и отправки формыновые значения не сохраняются.

РЕДАКТИРОВАТЬ 1

enter image description here

РЕДАКТИРОВАТЬ 2

StackBlitz link

Модели 

    export class Role extends BaseModel {
      name: string;
      objectPermissions: RoleObjectPermission[];
    }

    export class RoleObjectPermission extends BaseModel {
        name: string;
        permissions: { [key: string]: boolean };
    }

Json 

    {
        "id": 3,
        "name": "Author",
        "objectPermissions": [{
            "id": 1,
            "name": "User",
            "permissions": {
                "Create": false,
                "Read": false,
                "Update": false,
                "Delete": false
            }
        }, {
            "id": 2,
            "name": "Role",
            "permissions": {
                "Create": false,
                "Read": false,
                "Update": false,
                "Delete": false
            }
        }, {
            "id": 3,
            "name": "Blog",
            "permissions": {
                "Create": false,
                "Read": false,
                "Update": false,
                "Delete": false
            }
        }, {
            "id": 4,
            "name": "Post",
            "permissions": {
                "Create": false,
                "Read": true,
                "Update": false,
                "Delete": false
            }
        }]
    }

Component.ts 

    export class RoleEditComponent implements OnInit {
      targetedRole: Role;
      editRoleForm: FormGroup;

      constructor(
        private roleService: RoleService,
        private router: Router,
        private route: ActivatedRoute,
        private formBuilder: FormBuilder
      ) {}

      ngOnInit() {

        this.roleService
          .read<Role>(this.route.snapshot.params['roleid'])
          .subscribe(response => {
            this.targetedRole = response;
            this.editRoleForm = this.formBuilder.group({
              Name: [
                this.targetedRole.name,
                Validators.required
              ],
              Permissions: [
                this.targetedRole.permissions,
                Validators.required
              ]
              });

          });
      }

      submit() {
        this.roleService
          .update(this.targetedRole)
          .toPromise()
          .then(response => {
            this.router.navigate(['admin/roles']);
          })
          .catch();
      }
    }

Component.html 

    <form clrForm clrLayout="horizontal" [formGroup]="editRoleForm" (ngSubmit)="submit()" name="editRole" *ngIf="roleLoaded">
      <div class="form-group">
        <label>Name</label>
        <input clrInput type="text" formControlName="Name" />
      </div>
      <div class="form-group">
        <table class="table">
            <thead>
                <tr>
                  <th>Object</th>
                  <th *ngFor="let key of this.targetedRole.objectPermissions[0].permissions | keyvalue">{{key.key}}</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let obj of this.targetedRole.objectPermissions">
                  <td>{{obj.name}}</td>
                  <td *ngFor="let key of obj.permissions | keyvalue">
                    <input type="checkbox" [(checked)]="key.value" (change)="key.value = !key.value" formControlName="Permissions"/>
                  </td>
                </tr>
            </tbody>
        </table>
      </div>
      <br />
      <button class="btn btn-primary" (click)="cancel()">
        BACK
      </button>
      <button [clrLoading]="loadingBtnState" type="submit" class="btn btn-primary">
        UPDATE
      </button>
    </form>
...