Angular 复选框数组显示项目签入列表

我有可以添加到用户的所有公司角色的列表，还有我从用户那里获得的他当前拥有的角色的列表。我都是从服务中得到的。我想比较这两个列表，当我在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>

选择用户角色


{{role.label}


提交

我的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);
    }   
}

导出类AddRolePopupComponent扩展PopupAbstract实现
奥尼特{
用户角色=[]；
构造函数（private userService:userService，private companyService:companyService，public dialog:DialogRef）{
super（dialog，dialog.context）；
}
ngOnInit（）{
this.userService.getRolesForUser（this.context.id）.subscribe(
response=>{this.handlesuces（response）；}，
error=>{console.error（error）；}，
);
}
手感（回应）{
this.userRoles=响应；
}
submitRole（角色表单）{
console.log（rolesForm.value）；
}   
}

---

如何检查现有角色？

您可以在输入中使用[checked]指令。[checked]=“userRoles.indexOf（role.id）>-1”

您需要做的是检查

role.name

是否是

userRoles

的名称之一：

在

.ts

文件中，将

用户角色

映射到其

名称

s：

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

{{role.label}

---

希望有帮助：）

什么都没有发生……每次我打开列表的弹出窗口时，所有角色都会被选中。。。可以是其他的吗？你能记录下

context.roles

和

userRoles

并告诉我它们的内容吗？context.roles是数组：roles:array（2）0:{id:“cb53681a-608f-4ea5-a9a4-3826b30684b0”，name:“ROLE\u COMPANY\u ADMIN”，label:“COMPANY Administrator”，type:“COMPANY”}:{:{id:“6235e566-b668-4780-ba9a-72e7f9e5a067”，name:“ROLE_PROJECT_MANAGER”，标签：“PROJECT MANAGER”，键入：“COMPANY”}至于用户角色…HandleSuces中的响应给了我数组…：id:“cb53681a-608f-4ea5-a9a4-3826b30684b0”标签：“COMPANY Administrator”名称：“ROLE_COMPANY_ADMIN”类型：“COMPANY”它会给我一个错误…你能解决吗？[错误->][选中]=“userRoles.map”（userRole=>userRole.name）.indexOf（role.name）>-1“[（ngModel）]=”role.id“nam”）尝试删除

[（ngModel）]=”role.id“

可以显示整个错误，如果html代码包含语法错误，请验证它，谢谢：）现在检查我的答案：）