如何禁用nz-zorro-antd的select控件的下拉菜单？

Question

我正在实现一款集成了 nz-zorro UI 集合库的产品。

我想实现可以接受用户标签的输入控件。 nz-zorro 将为我提供那种具有

nz-select

控制功能。

当我们写入标签然后按回车键时，它将像芯片一样进行转换。检查下面的 gif :

但是这个控件是选择控件，所以它会在我不想打开的控件下打开下拉列表。

如果有人知道如何仅禁用下拉菜单，而不禁用输入控件，请帮助我。

我已经尝试过这个代码：

<nz-form-item>
    <nz-form-control>
          <nz-select formControlName="tags" nzMode="tags" nzPlaceHolder="Add Keywords">
          </nz-select>
    </nz-form-control>
</nz-form-item>

我还尝试使用带有

nzDropdownRender

选项的自定义下拉模板并将模板保留为空，但下拉菜单仍然打开。

如果有人有任何相关配置，请在这里提及。这会节省我很多时间。

Answer 1

在这个功能上花费了大量时间之后，我找到了可以使用 css 隐藏下拉菜单的解决方案。

经过一些文档后，我在

nz-select

控件中找到了自定义下拉类指令，它可以从

select

隐藏下拉菜单。

这是我的解决方案：

组件.ts：

<nz-form-item>
  <nz-form-control>
      <nz-select formControlName="tags" nzDropdownClassName="hide-dropdown" nzMode="tags" nzPlaceHolder="Add Keywords">
      </nz-select>
  </nz-form-control>
</nz-form-item>

在全球

style.css

：

.hide-dropdown {
   display: none;
 }

它只允许通过键入来输入标签。不是来自选择选项...

Answer 2

如果由于某些默认样式而接受的答案不起作用，请在全局文件中设置 !important 属性。

.hide-dropdown {
  display: none !important;
}

这解决了我的问题。