以編程方式設置複選框

我正在構建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>

我想弄清楚填充所選角色的最佳方法。我是否應該爲每個擁有「selected」屬性的用戶列出所有角色的列表，還是有一種更優雅的方式來執行此操作？

來源

2016-12-26 Isaac Levin

你只需要將你所有角色的列表映射成一些組合你用戶特定角色信息的東西。

假設你有一個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

來源

2016-12-27 03:10:20 Josh

如果allRoles是多維的，我該怎麼做？例如，我有一個「角色組」的數組，每個項目都有一個角色數組。我是否需要添加另一個循環？ –

@IsaacLevin - 您可以在地圖內製作一張地圖，以獲得全新的集合，其中包含所有您想要的信息。基本上它是一個嵌套循環。 – Josh

@IsaacLevin - 我添加了一個更新的plunker，展示瞭如何使用角色組來完成此操作。 – Josh

在roles添加isChecked關鍵像（isChecked: true/false）和

嘗試是這樣的：

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

這裏checkIfRoleSelected()爲使對象進一步使用（API調用）的變化。

來源

2016-12-26 18:56:16

我不知道如何幫助我......我基本上有2名列表，所有角色的列表以及用戶角色的列表。我需要能夠顯示檢查用戶角色的所有角色的列表。 –

你能提供你的數據格式嗎？或者看@Josh回答，會幫助你。 –

以編程方式設置複選框

回答

相關問題