Angular 4 复选框状态未更新，即使模型已更改

Question

我知道这个问题仍然存在，但根据这个解决方法它应该可以按预期工作，但是我仍然很难让它适用于我的案例。

我有授予角色的权限列表。当用户想要更新角色时，我会显示具有可编辑角色名称的表单及其权限列表作为复选框列表。现在，如果角色已经拥有列表中的权限，我需要检查一些列表项。

我的表格：

<tr *ngFor ="let perm of permissions, let i = index">
        <td>
            <label>
            <input type="checkbox" 
                    name="check-box-{{perm.permission_alias}}"                                            
                    value="{{perm.permission_id}}"  
                    (ngModel)="perm.checked"
                    (ngModelChange)="onSelectFilter($event,perm)"
                    attr.id="check-box-{{perm.permission_alias}}"
                    /> 
            {{perm.permission_alias}}
            </label>                                
        </td>
    </tr>

我的组件：

getPermissions(role: Role): void {
    this.permissions = [];
    this.userService.getPermissions().then(perms => {            
        if (role != null) {
            this.permissions = perms;
            for (let rp of role.permissions) {          
                let index = this.permissions.indexOf(this.permissions.find(p => p.permission_id == rp.permission_id));
                if (index >= 0) {  
                     this.permissions[index].checked = true;
                    //this.onSelectFilter(true, this.permissions[index]); not sure if this should be called
                }      
            }
            console.log("before selected perms on update");
            console.log(this.permissions);
        }
        else {
            this.permissions = perms;
        }

    }).catch(this.handleError);
}

   onSelectFilter(selected: boolean, filter: Permission) {
        filter.checked = selected;
        if (this.permissions.every(filter => !filter.checked)) {
            setTimeout(() => {
                this.permissions.forEach(filter => filter.checked = true);
            });
        }
    }

我不知道为什么这不起作用，我没有在列表中选中任何项目。如果有任何帮助，我将不胜感激。

Answer 1

我认为这里的错误是因为你总是'改变数组'。当 angular 进行变化检测运行时，它没有发现任何变化，并且 ngFor 没有更新。试试这段代码，看看我唯一做的就是在改变它之前复制数组。

getPermissions(role: Role): void {
this.permissions = [];
this.userService.getPermissions().then(perms => {            
    if (role != null) {
        this.permissions = perms;
        for (let rp of role.permissions) {          
            let index = this.permissions.indexOf(this.permissions.find(p => p.permission_id == rp.permission_id));
            if (index >= 0) {  
                 this.permissions = this.permissions.slice(0) // copy the array.
                 this.permissions[index].checked = true;
                //this.onSelectFilter(true, this.permissions[index]); not sure if this should be called
            }      
        }
        console.log("before selected perms on update");
        console.log(this.permissions);
    }
    else {
        this.permissions = perms;
    }

}).catch(this.handleError);
}

   onSelectFilter(selected: boolean, filter: Permission) {
    filter.checked = selected;
    if (this.permissions.every(filter => !filter.checked)) {
        setTimeout(() => {
            this.permissions = this.permissions.slice(0) // copy the array.
            this.permissions.forEach(filter => filter.checked = true);
        });
    }
}

Answer 2

这行得通。它将始终使用双向数据绑定保持同步。

<input type="checkbox" 
name="check-box-{{filter.text}}"
[(ngModel)]="filter.selected"
attr.id="check-box-{{filter.text}}">

如果您需要在更改时触发某些功能，请使用更改事件。

<input type="checkbox" 
name="check-box-{{filter.text}}"
[(ngModel)]="filter.selected"'
(change)="myCustomFun()"
attr.id="check-box-{{filter.text}}">

根据您的解决方法link

更新了您的plunk中的相同内容

Answer 3

请将 [(ngModel)] 与布尔变量一起使用，因为复选框是双向数据绑定

Angular 4 复选框状态未更新，即使模型已更改

Angular 4 checkbox state not updated even if model changed

checkbox

typescript

angular2-forms

angular