如何禁用 nz-zorro-antd 的选择控件的下拉菜单？答案

【问题标题】：how to disable select control's dropdown menu of nz-zorro-antd?如何禁用 nz-zorro-antd 的选择控件的下拉菜单？
【发布时间】：2020-10-21 05:57:34
【问题描述】：

我正在实施一种产品，其中集成了 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 选项的自定义下拉模板并保持模板为空，但下拉菜单仍在打开。

如果有人对此有任何配置，请在此处提及。它会节省我很多时间。

【问题讨论】：

标签： angular select tags

【解决方案1】：

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

经过一些文档，我在nz-select 控件中找到了自定义下拉类指令，该指令可以隐藏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;
 }

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

【讨论】：