如何在 angular 2 中重复 json 对象数据？

Question

我有如下 json 个对象：

{
  "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>

其余所有类别的格式与：客户、产品、包装等相同

我的组件 class 是：

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 设置，而不是在模板中设置。

例如：

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"> 仅支持字符串，而其他字段如 <select> 支持数组。

也可能是您需要编辑和收集多个值时，需要多次重复同一个字段。在这种情况下，您需要在表单模型中使用 FormArray。（如果 google "angular formarray"，您会找到教程。）

如何在 angular 2 中重复 json 对象数据？

How to repeat json object data in angular 2?

angular-ui-bootstrap

angular