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>

Component.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);
  }
}

ОБНОВЛЕНО

AuthService

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);
          }
        })
      );
  }

I ' Мы пробовали другой подход, но что я вижу, это какая-то ошибка, из-за того, что элементы отображаются в html, но выпадающий список не достигает своей высоты.

Есть идеи?

Спасибо перед рукой ...

Answer 1

По предложению MikeOne я начал делать проект stackblitz, и после его завершения все работало просто замечательно, но потом я понял, что проект в stackblitz имел версию ngx-bootstrap@5.6.0, в то время как мой был ngx-bootstrap@5.5.0 Я думал, что это было небольшая проблема, но я попытался в любом случае и удивительно, что это сработало.

Итак, изменения были

Обновление пакетов

с

до

Изменение импорта

Способ импорта с левой стороны предыдущего изображения по какой-то причине больше не работал, после проверки папки модулей, похоже, что основной файл ngx- bootstrap .ts был удалите в последней версии, поэтому мне пришлось изменить импорт на путь с правой стороны изображения