Le menu ngbdropdown ne se ferme pas après avoir cliqué sur l'un de ses éléments
J'ai utilisé le menu déroulant ngb pour afficher les différents statuts que ma tâche peut avoir («à faire», «en cours», «terminé»). Tout fonctionne bien, mais il y a un petit problème qui me dérange toujours. Après avoir cliqué sur l'une des options, je souhaite que le menu déroulant se ferme. Pour le moment, il reste ouvert. Comment puis-je fermer ce menu lorsque je clique dessus?
comme vous pouvez le voir ci-dessous, j'ai changé le statut de deux articles, mais le menu déroulant reste ouvert, ce qui n'est pas vraiment quelque chose que je veux
Code de modèle
<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>
Si votre question concerne CSS / HTML , il vous suffit d'appliquer quelque chose comme display: nonedans votre conteneur de menu.
Mais votre question concerne Angular , vous aurez besoin de quelque chose comme ceci:
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>Ce processus peut être fait de manières très différentes et tout dépendra de la façon dont vous voulez travailler, avec animation, avec un événement global pour cliquer sur "out" du menu puis le menu disparaîtra, et sur ...
Quoi qu'il en soit, j'espère que ces exemples peuvent rendre votre chemin plus clair.