Question

我正在尝试使用ngx-chips进行基于标记的下拉列表。以下是我正在使用的代码：

   <tag-input [onlyFromAutocomplete]="true" formControlName="data">
        <tag-input-dropdown [identifyBy]="'data'" [showDropdownIfEmpty]="true" [autocompleteItems]="dataObject"  [appendToBody]="false"></tag-input-dropdown>
  </tag-input>

我在bootstrap模型中使用上面的代码。但是当我试图关闭下拉列表时，单击模型上的任何位置，它就不会关闭。所以，我尝试添加[appendToBody]="false"并解决了问题，但现在下拉的位置受到干扰。

请让我知道可能的解决方案。

Answer 1

keepOpen - [?boolean]

与showDropdownIfEmpty结合使用。如果设置为false，则添加新标签后，下拉列表将不会自动重新打开。（默认为true）。

[keepOpen]="false"

Answer 2

MAnnas的答案很有帮助，因为在使用键盘输入关键字时不会打开下拉菜单，但是如果您碰巧用鼠标单击并仍然打开它，则存在以下问题：

将[appendToBody] = "false"添加到tag-input-dropdown，然后以globals.css添加以下CSS：

.ng2-dropdown-menu {
   position: absolute !important;
   left: 2% !important;
   top: 100% !important;
}

信用转到此Github issue

Answer 3

我遇到了同样的问题，对我有用的解决方案是：https://github.com/Gbuomprisco/ngx-chips/issues/783#issuecomment-546414947

还添加[keepOpen]="false"会使情况变得更好。

下降不关闭ngx-chips angular 2

3 个答案: