Bootstrap 4 引导下拉列表未展开

这是我的带有引导类的

HTML

代码，在

Angular

中使用它，这里

下拉列表不展开，保存数据和获取数据的值不显示在浏览器中。但是，如果我在任何在线引导工作区中使用相同的代码，它就可以正常工作（例如W3schools）。这里有些东西不支持它。我不明白我错过了什么。谁能帮我解决这个问题吗

<ul class="nav navbar-nav navbar-right">
        <li class="dropdown open">
           <a  class="dropdown-toggle" role="button"  href="#">Manage <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li > <a href="#"> Save Data</a></li>
              <li> <a href="#"> Fetch Data</a></li>
             </ul>
          </li>
     </ul>

我使用的是
Bootstrap
v4.1.2
 您想创建一个
header.component.html
文件，其中包含您的徽标和
nav
链接，包括管理、保存数据和获取数据。。。我认为你想要完成的事情是这样的：

 <nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a routerLink="/" class="navbar-brand">Your App Name</a>
    </div>

    <div class="navbar-default">
      <ul class="nav navbar-nav">
        <li routerLinkActive="active">
          <a routerLink="/recipes">Recipes</a>
        </li>
        <li routerLinkActive="active">
          <a routerLink="/shopping-list">Shopping List</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <ng-template [ngIf]="!authService.isAuthenticated()">
          <li><a routerLink="/signin">Sign In</a></li>
          <li><a routerLink="/signup">Sign Up</a></li>
        </ng-template>
          <li *ngIf="authService.isAuthenticated()"><a style="cursor: pointer;" (click)="onLogout()">Sign Out</a></li>
        <li appDropdown class="dropdown" *ngIf="authService.isAuthenticated()">
          <a class="dropdown-toggle" role="button" style="cursor: pointer;">Manage <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a style="cursor: pointer;" (click)="onSaveData()">Save Data</a></li>
            <li><a style="cursor: pointer;" (click)="onFetchData()">Fetch Data</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

 <nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a routerLink="/" class="navbar-brand">Your App Name</a>
    </div>

    <div class="navbar-default">
      <ul class="nav navbar-nav">
        <li routerLinkActive="active">
          <a routerLink="/recipes">Recipes</a>
        </li>
        <li routerLinkActive="active">
          <a routerLink="/shopping-list">Shopping List</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <ng-template [ngIf]="!authService.isAuthenticated()">
          <li><a routerLink="/signin">Sign In</a></li>
          <li><a routerLink="/signup">Sign Up</a></li>
        </ng-template>
          <li *ngIf="authService.isAuthenticated()"><a style="cursor: pointer;" (click)="onLogout()">Sign Out</a></li>
        <li appDropdown class="dropdown" *ngIf="authService.isAuthenticated()">
          <a class="dropdown-toggle" role="button" style="cursor: pointer;">Manage <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a style="cursor: pointer;" (click)="onSaveData()">Save Data</a></li>
            <li><a style="cursor: pointer;" (click)="onFetchData()">Fetch Data</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>