Question

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

目前，我使用* 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>

我正在尝试找出填充已选择角色的最佳方法。我是否应该列出每个用户的所有角色，并选择＆＃34;选择＆＃34;财产，还是有更优雅的方式去做？

Answer 1

您只需要将所有角色的列表映射到一组中，这些角色组合了用户特定角色集中的信息。

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

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的基本实现：https://plnkr.co/edit/zCCwLko5Nf2W92Ac7q4i?p=preview

使用角色组的示例： https://plnkr.co/edit/OgAmFFozPMtQ75iOs5mR?p=preview

Answer 2

在isChecked中添加roles 密钥，如isChecked: true/false）和

尝试这样的事情：

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

此处checkIfRoleSelected()用于在对象中进行更改以供进一步使用（API调用）。

以编程方式设置复选框

2 个答案: