选择标签在释放点击时关闭 - Angular答案

【问题标题】：Select tag closing on releasing click - Angular选择标签在释放点击时关闭 - Angular
【发布时间】：2020-03-20 09:11:23
【问题描述】：

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

            <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，并且包含用于样式的引导程序。

【问题讨论】：

能否提供代码链接？
困惑！请理解Dropdown和select标签是一样的。
能否提供一个工作示例！
你注意到了吗？您的提示框正在关闭而不是下拉菜单。所以尝试解决这个问题？

标签： html angular twitter-bootstrap html-select

【解决方案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>

【讨论】：

谢谢@nadhir。像魅力一样工作。但是现在，我无法访问从下拉列表中选择的值。 ngModel 返回未定义
@UjjwalSharma 哦，这是一个不同的问题，但根据您提供的代码，我在您的 html 中看不到 ngModel
@UjjwalSharma 您能否将此答案标记为正确，因为它解决了您最初的问题？

【解决方案2】：

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

【讨论】：