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

Question

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

提前致谢！

这是我的代码：

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

LIVE DEMO

Answer 1

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

Answer 2

这里有一个相对简单的解决方法：将默认标签设置为所需长度的字符串，比如 "Default"。然后使用 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.

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

How to set label to empty string in dropdown?

multi-select

typescript

primeng

angular