如何在下拉列表中将标签设置为空字符串？答案

【问题标题】：How to set label to empty string in dropdown?如何在下拉列表中将标签设置为空字符串？
【发布时间】：2019-05-07 09:44:27
【问题描述】：

我正在处理这个简单的多选下拉菜单，我想将标签设置为空（空字符串）。但是，当我使用 defaultLabel 时，它似乎无法正常工作。有没有办法将标签（测试）默认设置为空字符串？

提前非常感谢！

这是我的代码：

<p-multiselect
    [options]="registrationStatus"
    [defaultLabel]= "someText"
    [showHeader]="false">
</p-multiSelect>

LIVE DEMO

【问题讨论】：

它似乎适用于牢不可破的空格：someText: string = " "。见this stackblitz。
@ConnorsFan 尽管它有效，但我认为它似乎不是一个好的解决方案。

标签： angular typescript primeng multi-select

【解决方案1】：

这是一个相对简单的解决方法：将默认标签设置为所需长度的字符串，例如“默认”。然后使用 MultiSelectComponent 上提供的 [style] 属性有条件地应用color: transparent，只要没有选定的项目。这样，您不必处理适当地设置高度或宽度。

<p-multiSelect [options]="registrationStatus" [defaultLabel]="someText"
    [(ngModel)]="selectedItems" [showHeader]="false"
    [style]="getDefaultLabelStyle()">
</p-multiSelect>

someText: string = 'Default';
selectedItems: Array<Object> = [ ];

getDefaultLabelStyle() {
    return (this.selectedItems.length === 0) ?
        { color: 'transparent' } : null;
}

Full StackBlitz here.

【讨论】：

【解决方案2】：

您可以将空字符串设置为defaultLabel 并定义一个全局css 类，该类将覆盖控件的默认样式并设置初始大小。如果您想从特定宽度开始，您也可以在样式中设置最小宽度。然后，您使用 styleClass 属性应用您的 css 类。在官方文档here中有提到。

这是要放入应用程序的全局 css 中的样式：

.multipleSelectSize {
  height: 30px;
  min-width: 100px;
}

.multipleSelectSize > .ui-multiselect-label-container > .ui-multiselect-label {
  height: 27px;
}

以及应用样式的 html 模板：

<p-multiSelect [styleClass]="'multipleSelectSize'" [options]="registrationStatus" [defaultLabel]= "someText" [showHeader]="false"></p-multiSelect>

这里也是StackBlitz link。

【讨论】：

您没有按预期工作。您只是想添加一个高度，当您将鼠标悬停在多选下拉列表上时，您最终会看到灰色背景。
我已经用消除灰色区域的解决方案更新了答案。现在有点复杂了。如果您对此不满意，则必须询问组件的创建者如何以更简单的方式进行操作。