選擇在釋放點擊時關閉的標簽 - Angular

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>

我正在為應用程序使用 angular 6，並包含用於樣式的引導程序。

Answer 1

只需在初始下拉列表中添加(click)="$event.stopPropagation()" （當您單擊State 時，它會打開）

Answer 2

解決方法之一是將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>