Question

我有用户，他们每个人都有一些公司角色。我创建了弹出模式，通过复选框获取列表中的所有公司角色。对于该用户当时拥有的每个角色，将在列表中检查角色。取消选中角色并提交时，我希望使用.put方法更新该列表。

问题在于我创建了函数，但只要我保留以前的任何角色，该函数就会发挥双重作用。看起来他们以数组的方式进入数组，看到它们被检查或类似的东西。

我的意见：

export class AddRolePopupComponent extends PopupAbstract<any> implements OnInit {

userRoles = [];
userRolesNames = [];
selectedRoles = [];


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;
        this.userRolesNames = response.map(userRole => userRole.name);
}

selectRole(category, event , role) {
    var index = this.userRoles.indexOf(role);
    if (event.target.checked) {
        this.userRoles.push(role);
     } else {
        if (index !== -1) {
            this.userRoles.splice(index, 1);
        }
    }

}

submitRole(){
    console.log(this.userRoles);
}

userRoles =对handleSucess的响应让我获得了所选用户当前拥有的所有角色。

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" [checked]="userRolesNames.indexOf(role.name)>-1"  name="role"  (change)="selectRole(option, $event, role)">{{ role.label }}
                </li>
            </ul>
        </div>
    </div>
    <div class="flex-column-center2 width35">
        <button class="btn-main10" type="submit">Submit</button>
    </div>
</div> 
</form>

Answer 1

在将数据推送到数组之前，您必须验证列表中是否已存在role：

selectRole(category, event , role) {
    var index = this.userRoles.indexOf(role);
    // i added index == -1 : 
    if (event.target.checked && index == -1) {
        this.userRoles.push(role);
    } else {
        if (index !== -1) {
            this.userRoles.splice(index, 1);
        }
    }
    // map again the new userroles : 
    this.userRolesNames = userRoles.map(userRole => userRole.name);
}

Answer 2

我认为你的selectRole函数有问题。

订单不对。

如果：选中如果：存在，请将其删除否则：推它

selectRole(category, event, role) {
    var index = this.userRoles.indexOf(role);

    if (event.target.checked) {

        if (index > -1) {
            this.userRoles.splice(index, 1);
        } else {
            this.userRoles.push(role);
        }
    }
}

删除数组的重复和已检查元素

2 个答案: