Question

我有可以添加到用户的所有公司角色的列表，而且我还有来自用户的他目前拥有的角色的列表。我都得到了服务。我想比较这两个列表和当我在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>

我的意见：

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

如何检查现有角色？

Answer 1

您需要做的是检查role.name是userRoles的名称之一：

在.ts文件中，将userRoles映射到name 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 }}

希望有所帮助：）

Answer 2

您可以在输入中使用[checked]指令。 [检查] =＆＃34; userRoles.indexOf（role.id）-1个＆＃34;

列表

2 个答案: