即使模型更改，Angular 4 复选框状态也不会更新

Question

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

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

我的表格：

<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

这有效。它将始终使用 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}}">

从您的解决方法链接更新了您的plunk 中的相同内容