菜单的子菜单未打开

Question

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
	<nav class="navbar navbar-expand-sm navbar-light bg-light">

		<div class="collapse navbar-collapse" id="navbarSupportedContent">

			<ul class="nav navbar-nav ml-auto">
				<li class="nav-item dropdown mr-2 cursor-pointer" dropdown>
					<a class="btn nav-link dropdown-toggle" dropdownToggle>

					</a>
					<div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
						<a class="btn dropdown-item" *ngFor="let language of languages" (click)="setLanguage(language)">

							<span style="vertical-align: super;"></span>
						</a>
					</div>
				</li>

				<!-- utente con avatar -->
				<li class="nav-item dropdown mr-2 cursor-pointer" dropdown>
					<a class="btn nav-link float-right mt-1 pr-4" dropdownToggle>
						<span class="float-left mt-1">
          <i class="fa fa-user" style="font-size: 1.5rem;"></i>
          <!-- prevedere user image -->
        </span>
						<span class="float-right mt-1 ml-1">
          <div><b>user</b></div>
          <div *ngIf="currentUser.roles && currentUser.roles.length == 1">desc</div>
          <div *ngIf="currentUser.roles && currentUser.roles.length > 1">role</div>
        </span>
					</a>
					<!-- menu -->
					<div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
						<!-- logo confidi -->
				<div class="dropdown-item text-center user-image">
					<img [src]="userService.getUserPicture(currentUser?.image?.content)" class="img-fluid" alt="">
        </div>
					<!-- ultimo accesso -->
				<div class="dropdown-item">
					<div class="font-weight-bold">access </div>
					<div>date</div>
				</div>
				<!-- matricola -->
				<div class="dropdown-item">
					<div class="font-weight-bold">numer </div>
					<div>user</div>
				</div>
				<!-- ruoli -->
				<div class="nav-item dropdown mr-2 cursor-pointer" dropdown>
					<a class="btn nav-link dropdown-toggle font-weight-bold" dropdownToggle>roles</a>
					<div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
						<a class="btn dropdown-item" *ngFor="let role of currentUser.roles; let i = index">
							code - desc
						</a>
					</div>
				</div>


				<a class="dropdown-item logout-link" (click)="logout()">
					<i class="fa fa-lock"></i> <span class="font-weight-bold">logout</span></a>
		</div>
		</li>


		</ul>
		</div>
	</nav>
</header>

我有一个下拉菜单，其中包含多个下拉项目和一个我想成为子菜单的项目（包含项目列表）。 我在我的菜单上添加了子菜单，但是当我尝试打开它时它没有打开。

这里是堆栈闪电战

https://angular6-bootstrap4-navbar-j8ar1z.stackblitz.io

如您所见，有一个名为 roles 的子菜单未打开。我该如何解决？

Answer 1

问题在于您的 HTML - 您不能将 <li> 标记嵌套在另一个 <li> 标记内。

HTML <li> 元素 用于表示列表中的项目。它必须包含在父元素中：有序列表 (<ol>)、无序列表 (<ul>) 或菜单 (<menu>)。

来源：MDN web docs

你可以把<ul> 放在<li> 里面。这实际上是创建嵌套列表的正确方法。

另一件事是您正在尝试使用嵌套下拉菜单，而这些似乎仍然是 an experimental feature of ngx-bootstrap

基本工作示例：

 <!-- template.html !-->
<ul >
  <li dropdown  [autoClose]="false" container="body">
       <a dropdownToggle class="dropdown-item dropdown-toggle"
         (click)="false">Languages <span class="caret"></span></a>

  <ul id="dropdown-nested" *dropdownMenu class="dropdown-menu"
      role="menu" aria-labelledby="button-nested">
    <li role="menuitem" *ngFor="let lang of languages"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">{{lang}}</a></li>


  </ul>
  </li>

  <li dropdown  [autoClose]="false" container="body">
       <a dropdownToggle class="dropdown-item dropdown-toggle"
         (click)="false">User <span class="caret"></span></a>

  <ul id="dropdown-nested" *dropdownMenu class="dropdown-menu"
      role="menu" aria-labelledby="button-nested">
    <li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">Settings</a></li>

    <li role="menuitem" dropdown triggers="mouseover" placement="right" container="body">
      <a dropdownToggle class="dropdown-item dropdown-toggle"
         (click)="false">Roles<span class="caret"></span></a>
      <ul *dropdownMenu class="dropdown-menu" role="menu">
        <li role="menuitem" *ngFor="let role of currentUser.roles"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">{{role}}</a></li>
      </ul>
    </li>

      <li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">Logout</a></li>
  </ul>
  </li>
</ul>

// Component.ts
import { Component } from '@angular/core';
    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html'
    })
    export class AppComponent {
      public menu: {}[] = [];
      languages =  ['pl', 'en', 'de', 'es'];
      currentUser = {roles: ['admin', 'inboxUser', 'developer']}
    }

Example on Stackblitz