Select 标签在释放点击时关闭 - Angular

Question

我有一个 angular 组件，在下拉菜单中有一个 select 标记，用作使用 bootstrap 的 table 的过滤器。问题是当我打开 select 标签的下拉菜单到 select 一个值而不是保持下拉菜单打开以单击过滤器按钮时，下拉菜单就会关闭。

            <th>Start Time <a style="cursor: pointer;" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-filter filter-icon" aria-hidden="true"></i></a>
                <div class="dropdown-menu">
                    <div class="container p-0" style="width:50%;">
                        <div class="col-12 pr-0 pl-0 mb-3">Show items with value that:</div>
                        <select class="p-1 mb-3">
                                <option value="after">After</option>
                                <option value="before">Before</option>
                                <option value="equal">Equal</option>
                            </select>
                        <input type="date" class="p-1 m-2">
                        <select class="p-1 m-2">
                                <option value="and" style="width: 10px;">AND</option>
                                <option value="or">OR</option>    
                            </select>
                        <select class="p-1 mb-3">
                                <option value="after">After</option>
                                <option value="before">Before</option>
                                <option value="equal">Equal</option>
                            </select>
                        <input type="date" class="p-1 m-2">

                        <div class="row">
                            <button class="col-5 btn btn-primary p2 m-2">Filter</button>
                            <button class="col-5 btn btn-primary p2 m-2">Cancel</button>
                        </div>
                    </div>
                </div>
              </th>

我在应用程序中使用 angular 6，并在样式中包含 bootstrap。

Answer 1

解决方法之一是将 dropdown-menu 的内容包装在表单标签内，如下所示：

<ul class="dropdown-menu">
  <form>
    <div class="container p-0" style="width:50%;">
        <div class="col-12 pr-0 pl-0 mb-3">Show items with value that:</div>
        <select class="p-1 mb-3">
                <option value="after">After</option>
                <option value="before">Before</option>
                <option value="equal">Equal</option>
            </select>
        <input type="date" class="p-1 m-2">
        <select class="p-1 m-2">
                <option value="and" style="width: 10px;">AND</option>
                <option value="or">OR</option>    
            </select>
        <select class="p-1 mb-3">
                <option value="after">After</option>
                <option value="before">Before</option>
                <option value="equal">Equal</option>
            </select>
        <input type="date" class="p-1 m-2">

        <div class="row">
            <button class="col-5 btn btn-primary p2 m-2">Filter</button>
            <button class="col-5 btn btn-primary p2 m-2">Cancel</button>
        </div>
    </div>
  </form>
</ul>

Answer 2

只需在初始下拉列表中添加 (click)="$event.stopPropagation()"（当您单击 State 时它会打开）

Select 标签在释放点击时关闭 - Angular

Select tag closing on releasing click - Angular

html

html-select

twitter-bootstrap

angular