Html 如何使用angular Project在仪表板页面中根据用户类型显示配置文件（用户、超级用户、管理员）信息

在我的angular应用程序中，我创建了仪表板页面、超级用户仪表板和管理员仪表板页面。超级用户和管理员仪表板页面具有与仪表板页面相同的数据和一些额外的表。这就是为什么我在component.html页面中创建了管理员和组件页面以及一些表数据

我在“基本仪表板”页面中为所有仪表板使用了相同的导航链接（关于、通知、配置文件、注销）栏

现在，我想在单击概要文件链接时，根据用户类型（user、superuser、admin）显示概要文件信息

我已经在navbar中创建了个人资料链接页面。类似于：

profile.component.html

<h4>Username:</h4>
<h4>EmailId:</h4>
<h4>First name:</h4>
<h4>Last name:</h4>
<h4>Last login:</h4>

<nav>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">

        <li class="nav-item">
          <a routerLink="/dashboard" class="nav-link" id="col"><i class="fa fa-fw fa-home fa-lg"></i>Home <span
              class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a routerLink="/About" class="nav-link" href="#" id="col"><i class="fa fa-info-circle fa-lg"></i> About</a>
        </li>

        <li class="nav-item">
          <a routerLink="/dashboard" class="nav-link" id="col"><i class="fa fa-fw fa-bell"></i> Notifications&nbsp;<span class='badge badge-primary'>{{ncount}}</span></a>


      </ul>
      <div class="social-part">
        <a href="#" id="col" style="color: black;" >Profile</a>&nbsp;&nbsp;

        <a href="#" id="col" style="color: black;" (click)="logout()">Logout</a>

      </div>
</nav>

<div *ngIf="userType == 'Super User'">
 // Super User profile section.
 <h4>Username:</h4>
  ...
 //etc     
</div>

<div *ngIf="userType == 'Admin'">
 // Admin profile section.
 <h4>Username:</h4>
  ...
 //etc     
</div>

<div *ngIf="userType == 'User'">
 // User profile section.
 <h4>Username:</h4>
  ...
 //etc     
</div>

用户名：
EmailId:
名字：
姓氏：
上次登录：

我用GET方法调用了用户配置文件，详细信息如下

用户名、姓氏、姓氏、电子邮件id、上次登录详细信息

现在，当我们根据get方法API中的用户类型单击配置文件链接时，我想将用户、超级用户或管理员详细信息放在配置文件页面中。

仪表板页面中的导航链接：

dashboard.component.html

<h4>Username:</h4>
<h4>EmailId:</h4>
<h4>First name:</h4>
<h4>Last name:</h4>
<h4>Last login:</h4>

<nav>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">

        <li class="nav-item">
          <a routerLink="/dashboard" class="nav-link" id="col"><i class="fa fa-fw fa-home fa-lg"></i>Home <span
              class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a routerLink="/About" class="nav-link" href="#" id="col"><i class="fa fa-info-circle fa-lg"></i> About</a>
        </li>

        <li class="nav-item">
          <a routerLink="/dashboard" class="nav-link" id="col"><i class="fa fa-fw fa-bell"></i> Notifications&nbsp;<span class='badge badge-primary'>{{ncount}}</span></a>


      </ul>
      <div class="social-part">
        <a href="#" id="col" style="color: black;" >Profile</a>&nbsp;&nbsp;

        <a href="#" id="col" style="color: black;" (click)="logout()">Logout</a>

      </div>
</nav>

<div *ngIf="userType == 'Super User'">
 // Super User profile section.
 <h4>Username:</h4>
  ...
 //etc     
</div>

<div *ngIf="userType == 'Admin'">
 // Admin profile section.
 <h4>Username:</h4>
  ...
 //etc     
</div>

<div *ngIf="userType == 'User'">
 // User profile section.
 <h4>Username:</h4>
  ...
 //etc     
</div>

---

我已经尝试了很多方法，但是没有人能帮我解决这个问题。

为每种类型的用户配置文件创建一个单独的部分，并检查条件

profile.component.html

<h4>Username:</h4>
<h4>EmailId:</h4>
<h4>First name:</h4>
<h4>Last name:</h4>
<h4>Last login:</h4>

<nav>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">

        <li class="nav-item">
          <a routerLink="/dashboard" class="nav-link" id="col"><i class="fa fa-fw fa-home fa-lg"></i>Home <span
              class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a routerLink="/About" class="nav-link" href="#" id="col"><i class="fa fa-info-circle fa-lg"></i> About</a>
        </li>

        <li class="nav-item">
          <a routerLink="/dashboard" class="nav-link" id="col"><i class="fa fa-fw fa-bell"></i> Notifications&nbsp;<span class='badge badge-primary'>{{ncount}}</span></a>


      </ul>
      <div class="social-part">
        <a href="#" id="col" style="color: black;" >Profile</a>&nbsp;&nbsp;

        <a href="#" id="col" style="color: black;" (click)="logout()">Logout</a>

      </div>
</nav>

<div *ngIf="userType == 'Super User'">
 // Super User profile section.
 <h4>Username:</h4>
  ...
 //etc     
</div>

<div *ngIf="userType == 'Admin'">
 // Admin profile section.
 <h4>Username:</h4>
  ...
 //etc     
</div>

<div *ngIf="userType == 'User'">
 // User profile section.
 <h4>Username:</h4>
  ...
 //etc     
</div>

//超级用户配置文件部分。
用户名：
...
//等
//管理员档案部分。
用户名：
...
//等
//用户配置文件部分。
用户名：
...
//等

创建一个

行为主题

在您的服务文件中包含当前用户类型，并在模板中使用它。Thanks@ViralPatel，我还有一个疑问，我只想为管理员和超级用户显示导航链接报告。而不是为用户显示。如何根据条件显示此报告。

您可以添加：