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

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

您可以在输入中使用 [checked] 指令。 [选中]="userRoles.indexOf(role.id)>-1"

Answer 2

你要做的是检查 role.name 是否是 userRoles 的名称之一：

在您的 .ts 文件中，将 userRoles 映射到他们的 name :

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

希望对您有所帮助:)

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

Checkbox array show item checked in list

checkbox

checkboxlist

angular