Angular - 如何使用户角色复选框动态化答案

【问题标题】：Angular - How to make User Role Checkbox DynamicAngular - 如何使用户角色复选框动态化
【发布时间】：2019-10-28 02:51:06
【问题描述】：

我正在开发一个使用 Angular-7 作为前端和 Laravel-5.8 作为后端的 Web 应用程序。在其中，我应用了用户角色管理，如下所示：

user.component.ts

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.scss']
})
export class UsersComponent implements OnInit {

  users = null;     //Store Users Data
  roles = [{"name": "Staff"}, {"name": "ClientAdmin"}, {"name": "SuperAdmin"}, {"name": "Admin"}, {"name": "Manager"}];    //Store all roles Data
  clients = null;

  masterSelected:boolean;
  checklist:any;
  checkedList:any;

  public error = {
    'role' : null,
    'email' : null,
    'client_id' : null,
    'first_name' : null,
    'last_name' : null,
    'password' : null
  };

  role = null;
  User = 'User';

  data = {          //User Update Data
    "id" : null,
    "first_name" : null,
    "last_name" : null,
    "client_id" : null,
    "role" : []
  }

  form = {         //New User add Data
    'first_name' : null,
    'last_name' : null,
    'email' : null,
    'client_id' : null,
    'password' : null,
    'password_confirmation' : null,
    'role' : []
  }

  headers = {     //Token for API Authorization
    'Authorization' : this.token.get(),
    'X-Requested-With' : 'XMLHttpRequest'
  }

  sortData = {        //Current Sort Data
    "col" : null,
    "order" : null
  }

  isSuperAdmin = false;

  constructor(private roleManage : RolesCheckService , private route : ActivatedRoute, private pg: NgbPaginationConfig, private token : TokenService, private http : HttpClient, private router : Router,private api : ApiService, private notify : SnotifyService) {
    pg.boundaryLinks = true;
    pg.rotate = true;
  }

  ngOnInit() {
    window.dispatchEvent(new Event('load'));
    window.dispatchEvent(new Event('resize'));

    document.body.className = 'skin-blue sidebar-mini';

    console.log('isSuperAdmin: ' + this.roleManage.isSuperAdmin);
    this.isSuperAdmin = this.roleManage.isSuperAdmin;
    this.route.queryParams.subscribe(params => {
      if(params['role']){
        this.role = params['role'];
        this.User = this.role;

      } else {
        this.User = 'User';
        this.role = '';
      }
    })
    this.notify.clear();
    this.notify.info("Loading...", {timeout: 0});
  }

  checkbox(event){
    if(event.srcElement.checked){
      this.data.role.push(event.srcElement.name);
    } else {
      var index =this.data.role.indexOf(event.srcElement.name);
      this.data.role.splice(index, index+1);
    }
    console.log(this.data.role);
  }

  //New User add Handling
  add(){
    this.notify.clear();

    this.form.first_name = null;
    this.form.last_name = null;
    this.form.email = null;
    this.form.password = null;
    this.form.password_confirmation = null;
    this.form.role = [];

    var modal = document.getElementById('addModal');
    modal.style.display = "block";
  }

  checkboxAdd(event){
    if(event.srcElement.checked){
      this.form.role.push(event.srcElement.name);
    } else {
      var index =this.form.role.indexOf(event.srcElement.name);
      this.form.role.splice(index, index+1);
    }
    console.log(this.form.role);
  }

  addModalSubmit(){
    this.notify.clear();
    this.notify.info("Wait...", {timeout: 0});
    this.api.post('users', this.form, this.headers).subscribe(
      data => {
        this.notify.clear();
        this.notify.info("User Added Successfully", {timeout: 2000});
        this.ngOnInit();
        this.closeAddModal();
      },
      error => { this.notify.clear(); this.error = error.error.errors; }
    );

  }

  closeAddModal(){
    this.error = {
      'role' : null,
      'email' : null,
      'client_id' : null,
      'first_name' : null,
      'last_name' : null,
      'password' : null
    };
    var modal = document.getElementById('addModal');
    modal.style.display = "none";
  }
}

user.component.html

  <div class="col-xs-4">
     <a (click)='add()' class="btn btn-block btn-success" style="margin-right: 15px;"><i class="fa fa-plus"></i> Add New {{ User }}</a>
  </div>

  <div id="addModal" class="modal" style="background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4);">
      <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Add New {{ User }}</h5>
              <button type="button" class="close" (click)='closeAddModal()'>
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
                <div class="alert alert-danger" [hidden]="!error.role">
                    {{ error.role }}
                  </div>
                <div class="alert alert-danger" [hidden]="!error.email">
                    {{ error.email }}
                </div>
                <div class="alert alert-danger" [hidden]="!error.first_name">
                      {{ error.first_name }}
                </div>
                <div class="alert alert-danger" [hidden]="!error.last_name">
                      {{ error.last_name }}
                </div>
                <div class="alert alert-danger" [hidden]="!error.client_id">
                      {{ error.client_id }}
                </div>
                <div class="alert alert-danger" [hidden]="!error.password">
                      {{ error.password }}
                </div>
              <form #editUserForm=ngForm>
                  <div class="form-group">
                    <label for="name">First Name</label>
                    <input type="name" name="first_name" id="inputName" class="form-control" placeholder="First Name" [(ngModel)]="form.first_name" required>
                  </div>
                  <div class="form-group">
                      <label for="name">Last Name</label>
                      <input type="name" name="last_name" id="inputName" class="form-control" placeholder="Last Name" [(ngModel)]="form.last_name" required>
                    </div>
                  <div class="form-group">
                      <label for="name">Email</label>
                      <input type="email" name="email" id="inputEmail" class="form-control" placeholder="example@email.com" required [(ngModel)]="form.email">
                    </div>
                <div class="form-group">
                    <label for="name">Client</label>
                    <select class="form-control pt-1" name="client_id" [(ngModel)]="form.client_id">
                      <option value="null">Select Client</option>
                        <option *ngFor="let c of clients" value="{{c?.client_id}}">{{c.client_name}}</option>
                      </select>
                </div>
                <div class="form-group">
                        <label for="name">Role</label>
                        <div *ngFor="let role of roles">
                            <input type="checkbox" name="{{ role.name }}" value="{{ role.name }}" (change)="checkboxAdd($event)"> {{ role.name }}
                        </div>
                </div>
                <div class="form-group">
                        <label for="name">Password</label>
                  <input type="password" name="password" id="inputPassword" [(ngModel)]="form.password" class="form-control" placeholder="Password" required>
                </div>

                <div class="form-group">
                    <label for="name">Password Confirmation</label>
                  <input type="password" name="password_confirmation" id="inputPasswordConfirm" [(ngModel)]="form.password_confirmation" class="form-control" placeholder="Re enter Password" required>
                </div>
              </form>

            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" (click)='addModalSubmit()' [disabled]="!editUserForm.valid">Save changes</button>
              <button type="button" class="btn btn-secondary" (click)='closeAddModal()'>Close</button>
            </div>
          </div>
        </div>
  </div>

我有五个角色，即：

管理员
员工
客户端管理员
超级管理员
经理

从上图中，我想调整 user.component.ts 中的代码，使其以以下动态方式执行：

如果登录用户角色为 Admin，则复选框应显示所有五个角色
如果登录用户是Staff，则应该只显示staff
如果登录用户角色是 ClientAdmin，复选框应显示 ClientAdmin 和 Staff

我如何做到这一点？

【问题讨论】：

获取用户时可以使用角色列表进行后端响应
怎么样？你能给我一个样品吗

标签： angular

【解决方案1】：

如果你有很强的角色层次结构，那么首先是正确的角色顺序：

roles = [{"name": "SuperAdmin"}, {"name": "Admin"}, {"name": "ClientAdmin"}, {"name": "Manager"}, {"name": "Staff"}];    //Store all roles Data

在 user.component.ts 添加：

currentRole = "Admin"; //role of current user

getRoles(){
    return this.roles.slice(this.roles.findIndex((e)=>{ return e.name == this.currentRole;}));
  }

在 user.component.html 处更改：

<div *ngFor="let role of getRoles()">
      <input type="checkbox" name="{{ role.name }}" value="{{ role.name }}" (change)="checkboxAdd($event)"> {{ role.name }}
</div>

这里的例子https://stackblitz.com/edit/angular-khpe72

如果您没有强大的角色层次结构，请添加这样的设置属性：

   rolesSetting = [
    {"name": "SuperAdmin", allows:[
      {"name": "SuperAdmin"}, {"name": "Admin"}, {"name": "ClientAdmin"}, {"name": "Manager"}, {"name": "Staff"}
      ]}, 
    {"name": "Admin", allows:[
      {"name": "Admin"}, {"name": "ClientAdmin"}, {"name": "Manager"}, {"name": "Staff"}
      ]}, 
    {"name": "ClientAdmin", allows:[
      {"name": "ClientAdmin"}, {"name": "Staff"}
      ]}, 
    {"name": "Manager", allows:[
         {"name": "Manager"}, {"name": "Staff"}
      ]}, 
    {"name": "Staff", allows:[
          {"name": "Staff"}
      ]}
    ];

并在 user.component.ts 添加：

getRoles(){
    return this.rolesSetting.find((e)=>{return e.name == this.currentRole}).allows;
}

此处示例：https://stackblitz.com/edit/angular-ckviex

【讨论】：