Question

我可以选择下拉列表并获取数据，但后来的下拉列表没有关闭。

下面是我的html代码：

    <clr-dropdown [clrCloseMenuOnItemClick]="true" >
<button type="button" clrDropdownTrigger>
    <clr-icon shape="error" class="is-error" size="24"></clr-icon>
    <clr-icon shape="caret down"></clr-icon>
</button>
<clr-dropdown-menu *clrIfOpen> <label
    class="dropdown-header">Dropdown header</label>
<button type="button" class="dropdown-item "
    *ngFor="let module of moduleVal" (click)="selectModuleHandler($event)"
    value={{module}}>{{module}}</button>
</clr-dropdown-menu> </clr-dropdown>

我需要在工作结束后关闭下拉菜单，请帮助我。

Answer 1

您应该使用Angular组件作为下拉列表，然后单击要自动关闭的任何链接，将clrDropdownItem指令应用于菜单项。

https://vmware.github.io/clarity/documentation/v0.11/dropdowns#example

Answer 2

标题上About菜单的一个简单示例：

<div class="header-actions">
    <clr-dropdown>
        <button class="btn" clrDropdownTrigger>
            {{loggedOnUsername}}
            <clr-icon shape="caret down"></clr-icon>
        </button>
        <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
            <button type="button" (click)="openUserDialog = true" clrDropdownItem>Manage Users</button>
            <button type="button" (click)="openAboutDialog = true" clrDropdownItem>About</button>
            <button type="button" (click)="onLogout($event)" clrDropdownItem>Logout</button>
        </clr-dropdown-menu>
    </clr-dropdown>
</div>

点击清晰后关闭下拉列表

2 个答案: