如何在Angular 6中根据条件显示/隐藏li标签

很简单，你只需要利用Angular的*ngIf指令，就能轻松实现根据showEmailToggle变量的值来控制第一个<li>标签的显示状态。

修改后的完整HTML代码 #

<ul class="nav navbar-nav navbar-right">
  <!-- 通过*ngIf绑定变量控制该列表项的显示/隐藏 -->
  <li *ngIf="showEmailToggle">
    <a style="display: flex">
      <span class="pr-10">Email alerts</span>
      <ui-switch labelOn="On" labelOff="Off" switchColor="#f1f1f1" size="small" [checked]="user.EmailSubscription" (change)="onEmailSwitchChange($event)"></ui-switch>
    </a>
  </li>
  <li><a href="./assets/FAQs.pdf" target="_blank">FAQ</a></li>
  <li><a>Welcome, {{currentUser}}</a></li>
  <li>
    <button type="button" style="padding-top: 14px;" class="btn btn-link" (click)="openModal(LogoutConfirm)" > 
      Logout 
    </button>
  </li>
</ul>

组件逻辑确认 #

你组件里的逻辑是完全可行的，它会根据当前用户的角色动态设置showEmailToggle的值，建议把这段逻辑放在组件的生命周期钩子（比如ngOnInit）里执行，确保页面初始化时就能完成判断：

showEmailToggle: boolean;

ngOnInit(): void {
  if(sessionStorage.getItem("Role") === "Admin") {
    this.showEmailToggle = false;
  } else {
    this.showEmailToggle = true;
  }
}

这样设置后，当用户角色为Admin时，showEmailToggle会被设为false，第一个列表项就会自动隐藏；非Admin角色时，变量为true，邮箱提醒的开关项就会正常显示，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Vishal