Как отобразить несколько выпадающих списков в Angular с помощью NgBootstrap

#angular #drop-down-menu #ng-bootstrap

#angular #выпадающее меню #ng-bootstrap

Вопрос:

Как распределить выпадающие меню внутри другого меню с помощью ng-bootstrap, как в этом примере.

введите описание изображения здесь

это мой макет, и у меня он не работает:

 <li>
    <div ngbDropdown role="group" aria-label="Button group with nested dropdown">
        <a class="nav-link" ngbDropdownToggle>Click me</a>
        <div class="dropdown-menu" ngbDropdownMenu>
            <button ngbDropdownItem>One-1</button>
            <button ngbDropdownItem>Two-2</button>
            <ul ngbDropdown role="group" aria-label="Button group with nested dropdown" class="navbar-nav"
                style="background-color: aqua; color: red !important; ">
                <li class="dropdown-item dropdown" ngbDropdownItem>
                    <a ngbDropdownToggle>Dropdown 1</a>
                    <ul class="dropdown-menu" aria-labelledby="dropdown1-1-1">
                        <li class="dropdown-item" href="#"><a>Action 1.x</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</li>