angular 后端返回为{ "name": "John", "age": 30, "hobbies": [ label:[{ "name": "Reading", "level": 5 }, { "name": "Swimming", "level": 4 }, { "name": "Traveling", "level": 3 }] ] }数据结构，formcontrol怎么绑值

假设你要将上述数据结构绑定到一个表单中，可以按照以下步骤进行：

1. 创建一个 FormGroup 对象，用于表示整个表单。

import { FormGroup, FormControl } from '@angular/forms';

let myForm = new FormGroup({
  name: new FormControl(),
  age: new FormControl(),
  hobbies: new FormGroup({
    label: new FormControl()
  })
});

2. 将 FormGroup 对象绑定到模板中的表单元素上。

<form [formGroup]="myForm">
  <label>Name:</label>
  <input type="text" formControlName="name">

  <label>Age:</label>
  <input type="number" formControlName="age">

  <label>Hobbies:</label>
  <div formGroupName="hobbies">
    <div formArrayName="label">
      <div *ngFor="let hobby of myForm.get('hobbies.label').controls; let i=index">
        <div [formGroupName]="i">
          <input type="text" formControlName="name">
          <input type="number" formControlName="level">
        </div>
      </div>
    </div>
  </div>
</form>

在上述代码中，我们使用了 formControlName、formGroupName 和 formArrayName 指令，将表单元素与 FormGroup 对象中的对应控件进行绑定。由于 hobbies 属性是一个嵌套的 FormGroup，我们需要使用 formGroupName 指令来绑定它。而 hobbies.label 属性是一个数组，因此我们需要使用 formArrayName 指令来绑定它。在 *ngFor 中，我们遍历了 hobbies.label 数组中的每一个元素，并使用 [formGroupName]="i" 指令将其与 FormGroup 中的对应控件进行绑定。