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

enum UserRole {
  Admin = 'admin',
  User = 'user',
  Guest = 'guest'
}

<div *ngIf="userRole === UserRole.Admin">
  <!-- 显示的内容 -->
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  userRole: UserRole;

  constructor() {
    // 根据实际情况设置用户角色
    this.userRole = UserRole.Admin;
  }
}

<ng-container *ngIf="userRole === UserRole.Admin">
  <!-- 显示的内容1 -->
</ng-container>

<ng-container *ngIf="userRole === UserRole.User">
  <!-- 显示的内容2 -->
</ng-container>

<ng-container *ngIf="userRole === UserRole.Guest">
  <!-- 显示的内容3 -->
</ng-container>