typescript - Hur man visar/döljer element beroende på användarroll i Angular 4

Jag arbetar på ett projekt som har mer än en användartyp (SuperUser - SchoolAdmin - Teacher)

Och varje roll har privilegium att se vissa element.

Hur döljer jag element beroende på den inloggade användarens roll med *ngIf?

Det här är projektlänken på Stack-blitz, jag laddade upp en del av det för att guida mig med liveförhandsgranskningen.

Inuti appen hittar du vanliga tjänster >> auth, detta är mappen som innehåller inloggningstjänsten och autentiseringsskyddet.

Inuti modeller >> enum, kommer du att hitta användartyp enum.

Inuti komponentens inloggning hittar du formuläret som definierar användartyp.

Inuti rutterna kommer du att se de förväntade rollerna som gjorts för varje komponent.

Användare som jag skapade för testning:

Detta bör leda dig till skol-listan

Admin (som har superanvändarroll): [e-post skyddad] Lösenord: 12345

Detta bör leda dig till instrumentpanelen

Student (som har studentroll): [email Lösenord: 12345

Till exempel, om jag vill dölja ett element på instrumentpanelen så att det bara visas för superanvändarrollen, hur kan jag göra detta?

Jag vet att det finns ett sätt med ngIf men jag sitter fast på rätt sätt att skriva det inuti NgIf, jag vill ha exempel på min kod inte ett dummy-kod.

Uppdatering: problemet har lösts så jag raderade de användare som skapades för testning.

Svar #1

I ditt projekt, när en användare registrerar sig frågar du om han är en 'Lärare', 'Förälder' eller en 'Elev'. Så här har du din villkor.

När du loggar in eller registrerar dig bör du spara dina användardata någonstans (till exempel i en tjänst som du kan använda med @injection).

Sedan med de uppgifterna bör du göra några tester i ditt DOM så här:

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

Hjälper detta dig? Du borde läsa dessa dokument Tjänster

[Exempel i ditt fall]

Din tjänst:

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

Injicera sedan den tjänsten i din konstruktor och din tjänst i

Komponent :

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

DOM :

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

Svar #2

booleanvärdet sant eller falskt används för att dölja. I HTML-fil <div *ngIf=!test>_innehåll som ska skrivas ut_</div> I .ts-fil initiera test=false; så när this.test=true; kommer div att visas annars kommer den vara dold. Kontrollera ditt villkor och sätt test=true;