Question

我使用ngb下拉菜单显示了任务可以具有的不同状态（“待办”，“进行中”，“完成”）。一切正常，但仍有一个小问题困扰着我。单击选项之一后，我希望下拉菜单关闭。目前，它仍然保持打开状态。单击该菜单时如何关闭该菜单？

如下所示，我更改了两个帖子的状态，但是下拉菜单保持打开状态，这并不是我真正想要的

模板代码

<div class="col-md-4 text-right padding-topright" style=" object-fit: cover;">
                    <div ngbDropdown class="d-inline-block">
                      <button class="btn btn-sm kbn-todo" *ngIf="post.task.status == 'to do'" id="dropdownDone" style=" color: white;"
                      ngbDropdownToggle>{{post.task.status}}</button>
                      <button class="btn btn-sm kbn-working" *ngIf="post.task.status == 'in progress'" id="dropdownDone" style=" color: white;"
                      ngbDropdownToggle>{{post.task.status}}</button>
                      <button class="btn btn-sm kbn-done" *ngIf="post.task.status == 'done'" id="dropdownDone" style=" color: white;"
                      ngbDropdownToggle>{{post.task.status}}</button>
                      <div ngbDropdownMenu aria-labelledby="dropdownToDo">
                        <button class="dropdown-item pumpkin-orange-bg" (click)="OnMarkTaskToDo(i, this.post._id)">To Do</button>
                        <button class="dropdown-item" (click)="OnMarkTaskInProgress(i, this.post._id)">In Progress</button>
                        <button class="dropdown-item" (click)="OnMarkTaskCompleted(i, this.post._id)">Done</button>
                      </div>
                    </div>
                    <p class="small font-weight-bold" style="margin-top: 5px" *ngIf="post.task?.due_to != 'Invalid date'"> due {{post.task?.due_to | date}}</p>
                    <!-- <p class="small font-weight-bold" style="margin-top: 5px"> status- {{post.task?.status}}</p> -->

                  </div>

Answer 1

如果您是关于 CSS / HTML 的问题，只需在菜单容器中应用display: none之类的内容。

但是您要问的是关于 Angular 的问题，您将需要以下内容：

showMenu: boolean = false;

closeMenu() {
  let displayMenu = showMenu ? true : false;
  return displayMenu;
}

<div class="menu-container" *ngIf="showMenu">
<button class="close-menu" (click)="closeMenu()"></button>
</div>

此过程可以通过非常不同的方式来完成，并且这一切都取决于您想要的工作方式，动画，带有全局事件的“单击”菜单的“退出”，然后菜单消失，然后打开... < / p>

无论如何，我希望这些示例可以使您的道路更加清晰。

Answer 2

您可以执行以下操作：

<div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown">
  <button class="btn btn-outline-primary mr-2" id="dropdownManual" ngbDropdownAnchor (focus)="myDrop.open()">Toggle dropdown</button>
  <div ngbDropdownMenu aria-labelledby="dropdownManual">
    <button ngbDropdownItem>Action - 1</button>
    <button ngbDropdownItem>Another Action</button>
    <button ngbDropdownItem>Something else is here</button>
  </div>
</div>


<button class="btn btn-outline-danger mr-2" (click)="myDrop.close();">Close from outside</button>

仔细看看：

#myDrop="ngbDropdown"

并且：

(click)="myDrop.close();"

我想有很多人想要这种解决方案。

这是一个摘自以下示例：https://ng-bootstrap.github.io/#/components/dropdown/examples

ngbdropdown菜单在单击其中一项后没有关闭

2 个答案: