我单击其中一项后,ngbDropDown菜单不会关闭

我使用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>