각도 2에서 json 객체 데이터를 반복하는 방법은 무엇입니까?

Question

는 I는 다음과 같은 objct JSON 한 : 등 고객, 제품, 포장

: 모든 카테고리의 나머지 부분에서

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

과 같은 형식 :

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

내가 가지고있는이 형식 아래이의 조작

내 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] 
    }); 
} 

: <select> 지원 배열과 같은 다른 분야 반면, <input type="text"> 만 지원 문자열과 같은 일부 필드.

여러 값을 편집하고 수집해야하는 경우 동일한 필드를 여러 번 반복해야 할 수도 있습니다. 이 경우 양식 모델에 FormArray을 사용해야합니다. ("각도 형식"을 사용하면 튜토리얼을 볼 수 있습니다.)