如何在角度 2 中重复 json 对象数据？答案

【问题标题】：How to repeat json object data in angular 2?如何在角度 2 中重复 json 对象数据？
【发布时间】：2017-01-24 18:40:20
【问题描述】：

我有如下的 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>

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

我的组件类是：

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对象得到这个。

【问题讨论】：

你能改写你的问题吗？你想达到什么目的？您想在表单中显示 JSON 对象吗？或者您想将表单值作为 JSON 对象检索？...
我想在表单中显示 JSON 对象
好的，我已经用代码示例添加了答案。

标签： angular angular-ui-bootstrap

【解决方案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。（如果你用谷歌搜索“angular formarray”，你会找到教程。）

【讨论】：