Question

我有json objct如下：

{
  "url": null,
  "status": 200,
  "data": {
    "ROLE": [
      {
        "id": 1,
        "permissionName": "ADD"
      },
      {
        "id": 2,
        "permissionName": "EDIT"
      },
      {
        "id": 3,
        "permissionName": "LIST"
      },
      {
        "id": 4,
        "permissionName": "DELETE"
      }
    ],
    "CUSTOMERS": [
      {
        "id": 10,
        "permissionName": "ADD"
      },
      {
        "id": 11,
        "permissionName": "EDIT"
      },
      {
        "id": 12,
        "permissionName": "LIST"
      },
      {
        "id": 13,
        "permissionName": "DELETE"
      }
    ],
    "PRODUCT": [
      {
        "id": 14,
        "permissionName": "ADD"
      },
      {
        "id": 15,
        "permissionName": "EDIT"
      },
      {
        "id": 16,
        "permissionName": "LIST"
      },
      {
        "id": 17,
        "permissionName": "DELETE"
      },
      {
        "id": 18,
        "permissionName": "AVAILABLE"
      }
    ],
    "PRODUCT_CATEGORY": [
      {
        "id": 27,
        "permissionName": "ADD"
      },
      {
        "id": 28,
        "permissionName": "EDIT"
      },
      {
        "id": 29,
        "permissionName": "LIST"
      },
      {
        "id": 30,
        "permissionName": "DELETE"
      }
    ],
    "PACKAGES": [
      {
        "id": 19,
        "permissionName": "ADD"
      },
      {
        "id": 20,
        "permissionName": "EDIT"
      },
      {
        "id": 21,
        "permissionName": "DELETE"
      },
      {
        "id": 22,
        "permissionName": "LIST"
      }
    ],
    "SZ_CONNECT": [
      {
        "id": 35,
        "permissionName": "SZ_CONNECT"
      }
    ],
    "USER": [
      {
        "id": 5,
        "permissionName": "ADD"
      },
      {
        "id": 6,
        "permissionName": "EDIT"
      },
      {
        "id": 7,
        "permissionName": "LIST"
      },
      {
        "id": 8,
        "permissionName": "DELETE"
      },
      {
        "id": 9,
        "permissionName": "ASSIGN_ROLES"
      }
    ],
    "TERRESTRIAL": [
      {
        "id": 31,
        "permissionName": "ADD"
      },
      {
        "id": 32,
        "permissionName": "EDIT"
      },
      {
        "id": 33,
        "permissionName": "LIST"
      },
      {
        "id": 34,
        "permissionName": "DELETE"
      }
    ]
  },
  "message": "All Permissions",
  "objectErrors": [],
  "errorCount": 0
}

我必须以下面的格式来操纵它：

<label class="text-semibold">Role</label>
        <div class="row">
          <div class="col-md-3">
            <div class="checkbox">
              <label>
                <input type="checkbox" class="control-primary" checked="checked">
                Add
              </label>
            </div>
          </div>
          <div class="col-md-3">
            <div class="checkbox">
              <label>
                <input type="checkbox" class="control-primary" checked="checked">
                Edit
              </label>
            </div>
          </div>
          <div class="col-md-3">
            <div class="checkbox">
              <label>
                <input type="checkbox" class="control-primary" checked="checked">
                Delete
              </label>
            </div>
          </div>
          <div class="col-md-3">
            <div class="checkbox">
              <label>
                <input type="checkbox" class="control-primary" checked="checked">
                List
              </label>
            </div>
          </div>
        </div>

所有类别中的相同格式为：客户，产品，包装等。

我的组件类如下：

export class RolesComponent implements OnInit {
  public items: any;
  rolesForm: FormGroup;
  id: number;

  constructor(public fb: FormBuilder, private rolesService: RolesService) {
    this.rolesForm = this.fb.group({
      id: [''],
      permissionName: ['']
    })
    this.getRolesList();
  }

  ngOnInit(): void {

  }

  getRolesList() {
    this.rolesService.getRolesList().subscribe(result => {
        console.log("DataResult");
        console.log(result)
        this.items = result;
      },
      error => {
        console.log(error);
      });
  }
}

我想通过json对象来获取它。

Answer 1

字段的默认值需要由FormBuilder设置，而不是在模板中设置。

例如：

keyup

您传递到字段的数据类型取决于字段的类型：某些字段（如change）仅支持字符串，而其他字段（如constructor(public fb: FormBuilder, private rolesService: RolesService) { // Let's assume you can access your JSON data from here. const jsonData = { ... }; // Use your JSON data to initialize the fields with default values. this.rolesForm = this.fb.group({ id: [jsonData.id], permissionName: [jsonData.permissionName] }); }）则支持数组。

如果您需要编辑和收集多个值，也可能需要多次重复相同的字段。在这种情况下，您需要在表单模型中使用<input type="text">。（如果你google“angular formarray”，你会找到教程。）

如何以角度2重复json对象数据？

1 个答案: