nz-zorro-antd的select控件的下拉菜单怎么关闭？

Question

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

我想实现可以接受用户标签的输入控件。 nz-zorro 将通过 nz-select 控制为我提供那种功能。

当我们写标签然后回车时会像芯片一样转换它。检查下面的 gif：

但是这个控件是select控件所以，它会在我不想打开的控件下打开下拉菜单。

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

我试过这个代码 :

<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 控件中找到了自定义下拉菜单 Class 指令，它可以隐藏 select 的下拉菜单。

这是我的解决方案：

component.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;
 }

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

nz-zorro-antd的select控件的下拉菜单怎么关闭？

how to disable select control's dropdown menu of nz-zorro-antd?

tags

select

angular