如何在<li>标签上正确使用*NgIf Else？代码修正求助

你的核心问题是集装箱跟踪项的HTML结构无效——在<li>内部嵌套了另一个<li>，违反了HTML列表规范（<ul>/<ol>的直接子元素只能是<li>），导致渲染异常。以下是两种符合需求的修正方式：

方式一：合并条件到[hidden]（最简洁） #

直接通过逻辑表达式合并两个条件，不需要额外的*ngIf Else，代码更紧凑：

<li title="Login" [hidden]="currentUser.connected">
  <a routerLink="/login">
    <i class="fa fa-lock"></i> <span>Login</span>
  </a>
</li>

<li title="Registration" [hidden]="currentUser.connected">
  <a routerLink="/register">
    <i class="fa fa-user-plus"></i> <span>Registration</span>
  </a>
</li>

<li title="Edit Profile" [hidden]="!currentUser.connected">
  <a routerLink="/edit-profile">
    <i class="fa fa-id-card-o"></i> <span>Edit Profile</span>
  </a>
</li>

<!-- 集装箱跟踪项：品牌为MONTER时，未登录则隐藏；其他情况始终显示 -->
<li title="Container Tracking" [hidden]="brandName === 'MONTER Shipping Line' && !currentUser.connected">
  <a routerLink="/tracking">
    <i class="fa fa-truck"></i> <span>Container Tracking</span>
  </a>
</li>

方式二：使用*ngIf Else（适合多属性差异场景） #

如果需要在不同场景下修改<li>的其他属性（比如class、title），可以用<ng-container>作为*ngIf的载体（不会生成额外DOM元素），配合ng-template实现分支渲染：

<li title="Login" [hidden]="currentUser.connected">
  <a routerLink="/login">
    <i class="fa fa-lock"></i> <span>Login</span>
  </a>
</li>

<li title="Registration" [hidden]="currentUser.connected">
  <a routerLink="/register">
    <i class="fa fa-user-plus"></i> <span>Registration</span>
  </a>
</li>

<li title="Edit Profile" [hidden]="!currentUser.connected">
  <a routerLink="/edit-profile">
    <i class="fa fa-id-card-o"></i> <span>Edit Profile</span>
  </a>
</li>

<!-- 集装箱跟踪项分支渲染 -->
<ng-container *ngIf="brandName === 'MONTER Shipping Line'; then ctActive else ctInactive"></ng-container>

<ng-template #ctActive>
  <li title="Container Tracking" [hidden]="!currentUser.connected">
    <a routerLink="/tracking">
      <i class="fa fa-truck"></i> <span>Container Tracking</span>
    </a>
  </li>
</ng-template>

<ng-template #ctInactive>
  <li title="Container Tracking">
    <a routerLink="/tracking">
      <i class="fa fa-truck"></i> <span>Container Tracking</span>
    </a>
  </li>
</ng-template>

关键改动说明 #

• 移除了原代码中嵌套的<li>和外层多余的<li>、<div>，保证HTML结构符合列表规范
• 两种方式都严格遵循需求：
  • 登录/注册：用户登录时隐藏
  • 编辑资料：用户未登录时隐藏
  • 集装箱跟踪：仅当品牌为MONTER Shipping Line且用户未登录时隐藏，其他情况正常显示

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