Question

我有一个从包含第二个对象数组的api中检索到的打字稿对象。第二个对象包含类型为{ [key: string]: boolean }的键值对。

如您所知，布尔的多维数组可以垂直和水平增长。我正在尝试将布尔值创建双向绑定到复选框的匹配数组。

我已经基于绑定成功设置了复选框的初始值，但是在操纵这些值和提交表单时，新值不会持久。

编辑1

编辑2

模型

    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>

打字稿-将复选框绑定到键值对

0 个答案: