Как показать/скрыть элемент в зависимости от роли пользователя Angular 4

В вашем проекте, когда пользователь регистрируется, вы спрашиваете, является ли он «Учителем», «Родителем» или «Студентом». Вот вам и ваше состояние.

Когда вы входите в систему или регистрируетесь, вы должны где-то сохранить свои пользовательские данные (например, в службе, которую вы можете использовать с @инъекция.

Затем с этими данными вы должны выполнить некоторый тест в своей DOM следующим образом:

/* 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;
      }
 }

Затем введите эту службу в свой конструктор и свою службу в

Компонент:

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

ДОМ:

*ngIf="userService.currentUser.type_id == 1"

логическое значение true или false используется для сокрытия. В файле HTML <div *ngIf = !test>_contents to be printed_</div> В файле .ts инициализируйте test = false;, поэтому всякий раз, когда this.test = true; будет отображаться, div будет скрыт. Проверьте свое состояние и сделайте test = true;

Ты должен сделать:

<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;
}