ngx bootstrap 下拉菜单不显示带有 ngFor Angular 9 的项目

Question

正如标题所说，我可以在使用 ngFor 时显示下拉项

视觉效果

被检元素

html

        <li class="nav-item" *ngFor="let item of menu">
          <button
            class="btn btn-warning btn-flat"
            [routerLink]="['/', item.name]"
            *ngIf="item.submenu.length === 0"
          >
            {{ item.name | link | titlecase }}
          </button>
          <div
            class="btn-group"
            dropdown
            [autoClose]="true"
            *ngIf="item.submenu.length > 0"
          >
            <button
              id="button-animated-menu"
              dropdownToggle
              type="button"
              class="btn btn-warning btn-flat dropdown-toggle"
              aria-controls="dropdown-animated-menu dropdown"
            >
              {{ item.name | titlecase }}
              <span class="caret"></span>
            </button>
            <div
              id="dropdown-animated-menu"
              *dropdownMenu
              class="dropdown-menu"
              aria-labelledby="button-animated-menu"
            >
              <li *ngFor="let k of item.submenu">
                <a class="dropdown-item" [routerLink]="['/', k.name]">
                  {{ k.name | link | titlecase }}
                </a>
              </li>
            </div>
          </div>
        </li>

组件.ts

export class NavbarComponent implements OnInit {
  constructor(
    private authService: AuthService,
    private router: Router,
    private alert: AlertService
  ) {}
  menu: Menu[] = this.authService.menus;

  ngOnInit(): void {
    console.log(this.menu);
  }
}

更新

认证服务

export class AuthService {
  baseUrl = environment.apiUrlLogIn;
  private USER: UserDetails;
  jwthelper = new JwtHelperService();
  constructor(private http: HttpClient) {}

  get roles(): string[] {
    return this.USER.authorities;
  }

  get menus(): Menu[] {
    return this.USER.menu;
  }

  login(data: any) {
    return this.http
      .post(this.baseUrl, data)
      .pipe(
        map((response: Token) => {
          if (response) {
            localStorage.setItem('token', response.access_token);
            localStorage.setItem(
              '_token',response.refresh_token);
            this.USER = this.jwthelper.decodeToken(response.access_token);
          }
        })
      );
  }

我尝试了不同的方法，但我可以看到，这是某种错误，因为元素是在 html 中呈现的，但下拉列表没有达到它们的高度。

有任何想法吗？

先谢谢...

Answer 1

按照MikeOne建议，我开始制作一个 stackblitz 项目，完成后一切正常，但后来我意识到 stackblitz 中的项目有ngx-bootstrap@5.6.0版本，而我的是ngx-bootstrap@5.5.0我认为这是一个小问题，但无论如何我都尝试过，令人惊讶的是它奏效了。

所以变化是

更新包

从

到

更改导入

上图左边的导入方式由于某种原因已经不行了，检查modules文件夹后，似乎最新版本的ngx-bootstrap.ts主文件被删除了，这就是为什么我不得不改变导入到图片右侧的方式