角度2でjsonオブジェクトデータを繰り返す方法は？

Question

私は以下のようにobjct 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> 

と同じ形式：顧客、製品、包装材など

マイcomponendsクラスがあるとして：

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の「角形配列」の場合は、チュートリアルがあります。）