Angular 以编程方式设置复选框

我正在Angular 2中构建一个用户管理屏幕，我希望能够从屏幕上管理用户的角色。目前，我有一个所有角色（id和name）的列表和一个包含该用户所有角色的数组（id和name）的用户列表。我希望能够将屏幕上的角色列为复选框，并能够为用户已经拥有的角色设置它们

目前，我在模板中使用*ngFor列出了所有角色

   <div class="row">
                <div class="col-xs-12">
                    <div class="form-inline" style="display:inline" *ngFor="let role of allRoles">
                        <div class="form-check">
                            <label class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input">
                                <span class="custom-control-indicator"></span>
                                <span class="custom-control-description">{{role.name}}</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

{{role.name}

---

我试图找出填充已选定角色的最佳方法。我应该为每个用户提供一个具有“selected”属性的所有角色列表，还是有更优雅的方法来执行此操作？

在您的

角色中添加
isChecked
键（
isChecked:true/false
）和

试着这样做：

<input type="checkbox" class="custom-control-input" [ngModel]="role.isChecked" (ngModelChange)="checkIfRoleSelected($event, role)">

this.usersService.getUserRoles(this.selectedUser.id)
  .subscribe(userRoles => {
        this.userRoles = this.allRoles.map(r => {
                return {
                    id: r.id,
                    name: r.name,
                    isAssigned: userRoles.some(ur => {
                      return ur.id == r.id;
                    })
                };
            });
        });



此处
选中ifroleselected（）
以更改对象以供进一步使用（API调用）。
您只需将所有角色的列表映射到结合用户特定角色集信息的内容中

假设组件中有一个
allRoles
集合，您可以执行以下操作：

<input type="checkbox" class="custom-control-input" [ngModel]="role.isChecked" (ngModelChange)="checkIfRoleSelected($event, role)">

this.usersService.getUserRoles(this.selectedUser.id)
  .subscribe(userRoles => {
        this.userRoles = this.allRoles.map(r => {
                return {
                    id: r.id,
                    name: r.name,
                    isAssigned: userRoles.some(ur => {
                      return ur.id == r.id;
                    })
                };
            });
        });

本质上是创建所有可用角色的列表，但只是标记用户分配给的角色

您可以看到此Plunker的基本实现：

使用角色组的示例：
我不确定这对我有何帮助。。。我基本上有两个列表，一个是所有角色的列表，一个是用户角色的列表。我需要能够在选中用户角色的情况下显示所有角色的列表。您能提供您的数据格式吗？或者看@Josh-answer，会帮助你。如果所有角色都是多维的，我该怎么做？例如，我有一个“角色组”数组，每个项目都有一个角色数组。我需要添加另一个循环吗？@Isaclevin-你可以在地图中绘制地图，以获得一个全新的集合，其中包含你想要的所有信息。基本上，它是一个嵌套循环。@Isaclevin-我添加了一个更新的plunker，显示了如何使用角色组执行此操作。