时间戳

首页 > 解决方案 > 使用 Angular Bootstrap，我无法在下拉菜单中获取下拉项目

angular - 使用 Angular Bootstrap，我无法在下拉菜单中获取下拉项目

问题描述

这是相关的导入 import { NgbModule, NgbDropdownToggle, NgbDropdownMenu, NgbDropdown } from '@ng-bootstrap/ng-bootstrap';

下面是我使用的代码。并且不显示下拉菜单但下拉项目的代码功能。

<li ngbDropdown class="nav-item dropdown ml-0 ml-md-auto" #dropdown="ngbDropdown">
        <a class="nav-link dropdown-toggle"  ngbDropdownToggle>
          <i class="fa fa-user mr-1"></i>
          <span *ngIf="!token"> Account </span>
          <span *ngIf="data.user">{{ data.user.name }}</span>
        </a>
        
        <div ngbDropdownMenu class="dropdownMenu" aria-labelledby="dropdown">
          <a *ngif="token" (click)="closeDropdown(dropdown);collapse();" routerLink="/profile" class="dropdown-item" ngbDropdownItem >
            <i class="fa fa-user-circle" aria-hidden="true"></i>Profile 
          </a>
          <a *ngif="!token" (click)="closeDropdown(dropdown);collapse();" routerLink="/login" class="dropdown-item" ngbDropdownItem >
            <i class="fa fa-key" aria-hidden="true"></i>Login 
          </a>
          <a *ngif="token" (click)="closeDropdown(dropdown);collapse();logout();"  class="dropdown-item" ngbDropdownItem > 
            <i class="fa fa-key" aria-hidden="true"></i>Logout 
          </a>
          <a *ngif="!token" (click)="closeDropdown(dropdown);collapse();" routerLink="/register" class="dropdown-item" ngbDropdownItem >
            <i class="fa fa-group" aria-hidden="true"></i>Register
          </a>  
        </div>
      </li>

标签： angulardrop-down-menudropdownng-bootstrap

解决方案

代码中有错字。

*ngif将<a>标签更改为*ngIf.

推荐阅读