Как показать / скрыть тег li в зависимости от условий в Angular 6

Question

Привет! Я использую несортированный список для отображения некоторых ссылок и других данных, я хочу, чтобы один из li отображался на основе значения переменной (если его true показывает тег 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

Вы можете использовать

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

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
}