Question

我正在开发一个有多个用户类型的项目（SuperUser - SchoolAdmin - Teacher）

每个角色都有权看到一些元素。

如何使用* ngIf隐藏元素，具体取决于记录的用户角色？

这是关于Stack-blitz的项目link，我上传了一些项目以引导我进行实时预览。

在内部应用中，您会找到常用服务＆gt;＆gt; auth，这是具有登录服务和身份验证保护的文件夹。

内部模型＆gt;＆gt;枚举，你会发现用户类型枚举。

在组件内部登录中，您将找到定义用户类型的表单。

在内部路线中，您将看到为每个组件创建的预期角色。

我为测试做的用户：

这会让你进入学校名单

Admin（具有超级用户角色）： test1@test.com 密码：12345

这会将您引导至仪表板

学生（有学生角色）： test2@test.com 密码：12345

例如，我想隐藏在仪表板上的元素只显示给超级用户角色，我该怎么做？

我知道有一种使用ngIf的方法，但是我坚持以正确的方式将其写入NgIf中，我希望我的代码上的示例不是虚拟代码。

更新：问题已解决，因此我删除了用于测试的用户。

Answer 1

在您的项目中，当用户注册时，您会询问他是否是“老师”，“父母”和“父母”。或者是学生＆＃39;。所以，你有条件。

当您登录或注册时，您应该将您的用户数据保存在某个地方（例如，您可以使用@injection在服务中使用。

然后使用该数据，您应该在DOM中进行一些测试：

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/90/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

这对你有帮助吗？您应该阅读此文档Services

[以你的情况为例]

您的服务：

/* if type_id == id(student) */
 <div *ngIf="myService.currentUser.type_id">
   // your student display ...
 </div>

 /* if type_id == id(teacher) */
 <div *ngIf="myService.currentUser.type_id">
   // your teacher display ...
 </div>

然后在

中的构造函数和服务中注入该服务

组件：

import { Injectable } from '@angular/core';
/*
   other import 
*/

 @Injectable()
 export class UserService {

      public currentUser: any;

      constructor(){}

      public login(loginData: LoginModel): any {
            const apiUrl: string = environment.apiBaseUrl + '/api/en/users/login';  
            let promise = new Promise((resolve, reject) => { // this is a  promise. learn what is a promise in Javascript. this one  is only more structured in TypeScript
  // a promise is returned to make sure that action is taken only after the response to the api is recieved
             this.http.post(apiUrl, loginData).subscribe((data: any) => {
                if(data.status)
                {
                  var userData = {
                      token: data.token,
                      user:data.user 
                     };
                this.currentUser = data.user // HERE SAVE YOUR user data
                return resolve(userData);
                }
                else {
                       return reject(data)
                 }
               }, (err: HttpErrorResponse) => {
               return reject(err);
            });
          });
     return promise;
      }
 }

DOM：

// Don't forgot to import UserService !!
constructor(public userService: UserService){}

Answer 2

布尔值true或false用于隐藏。在HTML文件中<div *ngIf = !test>_contents to be printed_</div>在.ts文件中初始化test = false;因此，只要this.test = true; div显示，否则将隐藏。检查您的情况并制作test = true;

Answer 3

你应该这样做：

<div *ngIf="superUserLogged">
   // your SuperUser display ...
 </div>
<div *ngIf="schoolAdminLogged">
       // your SuperUser display ...
</div>
<div *ngIf="teacherLogged">
       // your SuperUser display ...
</div>

并在* .ts文件中，当有人登录系统时，你会这样做：

onLogin(userrLogged: string) {
    this.superUserLogged  = false;
    this.schoolAdminLogged = false;
    this.teacherLogged = false;
    switch (userrLogged) {
        case 'SuperUser':
            this.superUserLogged = true;
            break;
        case 'SchoolAdmin':
            this.schoolAdminLogged = true;
            break;
        case 'Teacher':
            this.teacherLogged = true;
            break;
}

如何根据用户角色显示/隐藏元素Angular 4

3 个答案: