Question

所以我有一个抓住价值“角色”的复选框。每个角色都是这样的：

当我在复选框列表中检查几个角色时，我将它们推入数组“selectedRoles” 我得到的问题是当我去console.log并打印结果console.log（this.selectedRoles）; ，

我得到(2) ["[object Object]", "[object Object]"]或更多（取决于我选择了多少角色）。我无法将它们推出，所以我可以看到每个角色的属性，因为我希望它们通过服务进行PUT。我正在使用Angular 2。

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" value="{{role}}" (change)="selectRole(option, $event)">{{ 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 = [];
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);
}

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

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

Answer 1

用value指令替换ngValue：

<input class="roles-li" type="checkbox" [checked]="userRolesNames.indexOf(role.name)>-1"  name="role" [ngValue]="role" (change)="selectRole(option, $event)">

编辑：

由于Angular的版本不支持ngValue，因此您可以将role作为参数直接传递给方法selectRole，这样您就不会使用event.target.value ：

所以在您的 Html ：

中

 <input class="roles-li" type="checkbox" [checked]="userRolesNames.indexOf(role.name)>-1"  name="role"  (change)="selectRole(option, $event, role)">

并在您的 ts ：

中

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

Answer 2

我建议不要将value绑定到对象的复选框。相反，我只是通过DOM中的函数传递role。

(change)="selectRole(role, option, $event)"

最终会更清晰，更容易理解。

转换JSON对象数组

2 个答案: