Question

   <div class="row">
            <div class="col-sm-6 no-right-border">
                <div class="form-group">
                    <label for="inputFirstName">Filter:</label>
                    <select class="form-control custom-select" type="text" [(ngModel)]="selectedFilterObject" [ngModelOptions]="{standalone: true}" (ngModelChange)="setSelectedFilter($event)">
                        <option *ngFor="let searchFilter of searchData.searchFilters" [ngValue]="searchFilter">{{searchFilter.name}}</option>
                    </select>
                </div>
            </div>
        </div>

我有这个选择框。当我点击选择时它打开，但我想要的是当我将鼠标悬停在选择之外时关闭？有什么建议吗？

Answer 1

选择没有默认的关闭/打开标签，因此不容易。更好的方法是创建一个ul-li列表（使其看起来像选择框）并执行以下操作：

conditionForTheListToBeShown: boolean = false;

<span (click)="setConditionValue(true)">Expand the list</span>
<ul *ngIf="conditionForTheListToBeShown" (mouseleave)="setConditionValue(false)">
  <li>...</li>
</ul>

如何关闭选择鼠标选择？

1 个答案: