选择标记在释放点击时关闭-角度

Question

我在下拉菜单中有一个带选择标签的角度组件，可用作使用引导程序的表格过滤器。问题是我打开选择标签的下拉菜单以选择一个值后，下拉菜单立即关闭，而不是保持下拉菜单单击过滤器按钮。

            <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>

我在应用程序中使用的是角度6，并包含用于样式的引导程序。

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>