체크 박스 배열의 목록 체크리스트

나는 사용자에게 추가 할 수있는 모든 회사 역할의 목록을 가지고 있으며 현재 가지고있는 역할에 대해 사용자로부터받은 목록도 가지고 있습니다. 둘 다 서비스에서 나옵니다. 이 두 목록과 존재하는 역할을 비교하여 HTML 목록에 표시 할 때 확인하고 싶습니다.체크 박스 배열의 목록 체크리스트

내 HTML :

<div class="roles-div"> 
<div style="text-align: center;"> 
    <label class="label-roles">Select User Roles</label> 
</div> 
<form #rolesForm="ngForm" (ngSubmit)="submitRole(rolesForm)" > 
<div class="flex-column-center"> 
    <div class="flex-center width90 height300 checkbox-div"> 
     <div> 
      <ul> 
       <li *ngFor="let role of context.roles"> 
        <input class="roles-li" type="checkbox" [(ngModel)]="role.id" name="role">{{ role.label }} 
       </li> 
      </ul> 
     </div> 
    </div> 
    <div class="flex-column-center2 width35"> 
     <button class="btn-main10" type="submit">Submit</button> 
    </div> 
</div> 
</form>

내 TS :

export class AddRolePopupComponent extends PopupAbstract<any> implements 
    OnInit { 
    userRoles = []; 


    constructor(private userService: UserService, private companyService: CompanyService, public dialog: DialogRef<any>) { 

     super(dialog, dialog.context); 
    } 

    ngOnInit() {   
     this.userService.getRolesForUser(this.context.id).subscribe(
      response => { this.handleSucess(response); }, 
      error => { console.error(error); }, 
     ); 
     } 


    handleSucess(response) { 
      this.userRoles = response; 
    } 

    submitRole(rolesForm){ 
     console.log(rolesForm.value); 
    } 
}

무엇을 어떻게해야이 기존 역할을 확인하려면?

출처

2017-10-24 Vladimir Tomasevic MyNameIsVLT

당신은'context.roles'와'userRoles'를 로깅 할 수 있습니까? –

Context.roles 배열은 다음과 같습니다 역할 : 배열 (2) : {ID : "cb53681a-608f-4ea5-a9a4-3826b30684b0"이름 : "ROLE_COMPANY_ADMIN"레이블 : "회사 관리자"를 입력 : "COMPANY"} : {id : "6235e566-b668-4780-ba9a-72e7f9e5a067", 이름 : "ROLE_PROJECT_MANAGER", 레이블 : "프로젝트 관리자", 유형 : "COMPANY"} –

userRoles의 경우 handleSucess에서 .response은 ... 나에게 배열을주고있다 : ID 을 : "cb53681a-608f-4ea5을-a9a4-3826b30684b0" 라벨 을 : "회사 관리자",536,913을이름 : "ROLE_COMPANY_ADMIN" 유형 : "회사" –

는 userRoles의 이름 중 하나입니다 자신의 name들에 userRoles :

userRolesNames = []; 
handleSucess(response) { 
      this.userRoles = response; 
      this.userRolesNames = response.map(userRole => userRole.name); 
}

당신의 HTML에서 :

<input class="roles-li" type="checkbox" [checked]="userRolesNames.indexOf(role.name)>-1" name="role">{{ role.label }}

그것을 희망 도움이 :

출처

2017-10-24 16:01:19

그것은 나에게 오류를 떨어 뜨린다. .. 당신이 그것을 이해할 수 있다고 생각 하느냐? [오류 ->] [선택] = "userRoles.map (userRole => userRole.name) .indexOf (role.name)> - 1"[(ngModel)] = "role.id"nam ") –

시도 –

다시 ... 오류 –

입력 내용에 [checked] 지시문을 사용할 수 있습니다.

당신의 .ts 파일, 맵 : - [확인] = "userRoles.indexOf (role.id)> 1"당신이해야 할 것은 role.name 있는지 확인하는 것입니다

출처

2017-10-24 15:30:02

아무것도 발생하지 않습니다 ... 내가 모든 역할 점검, 목록 팝업을 열 때마다 ... 뭔가 될 수 있을까? –

체크 박스 배열의 목록 체크리스트

답변

관련 문제