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

Question

您好，我使用未排序列表来显示一些链接和其他数据，我希望其中一个li根据变量值显示(如果它是true show li标签，如果是false，那么li应该是隐藏的)。

 <ul class="nav navbar-nav navbar-right">
    <li><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>

在上面的代码中，我希望根据条件显示第一个li标记。其文件代码如下：

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

Answer 1

在ng-container中使用ngIf指令，并将li标记放在其中

<ng-container *ngIf="checkSession()">

     <li><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>

</ng-container>

checkSession(){
  if(sessionStorage.getItem("Role") === "Admin")  return  false; 
  return true
}

Answer 2

您可以使用

<li [style.visibility]="showEmailToggle ? 'visible' : 'hidden'"></li>