Question

嗨，我正在使用未排序的列表来显示一些链接和其他数据，我希望基于变量值显示li之一（如果其为true，则显示li标签，如果为false，则应隐藏li）。 / p>

 <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

您可以使用

OrderAdmin

Answer 2

在ngIf内使用ng-container指令并将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
}

如何基于Angular 6中的条件显示/隐藏li标签

2 个答案: