PrimeNg 下拉列表 - 用户无法清除值

Question

我正在在我的angular2应用程序中实现Primeng下拉组件。

<p-dropdown [options]="listCustomers_itm" placeholder="Selezionare" [(ngModel)]="Customer_itm" [ngModelOptions]="{standalone: true}" [style]="{'width':'225px'}" filter="filter"  (onChange)="onCustomerSelect($event.value)">
</p-dropdown>

除了一个宣传事物外，所有人都可以正常工作：

一次用户选择一个选项，他无法清除选定的值 ...

你能帮我吗？

Answer 1

[showClear]="true"或 editable="true"请根据您的要求添加showClear属性或可编辑的属性。这适用于您的用例

Answer 2

要解决此问题，我必须为下拉次数设置一个占位符。我使用的代码类似于：

template.html

<p-dropdown ...
            placeholder="Select"
            #dropDownThing></p-dropdown>
<button (click)="onButtonClick()"></button>

component.ts

import { Dropdown } from "primeng/components/dropdown/dropdown";
...
@ViewChild('dropDownThing')
dropDownThing: Dropdown;
...
onButtonClick() {
    this.dropDownThing.value = <someValueNotInTheDropdown'sList>;
}
...

当运行上述代码没有占位符时，仍将选择当前选择的选项。

当以上代码运行带有占位符时，下拉列表的值会更改为所提供的占位符。

Answer 3

要清除所选的下拉值，只需将所选选项设置为空字符串即可。例如，这是一个下拉词，让用户选择"上个月"或"上周："

组件

ngOnInit() {
    // Initialize drop-down values
    this.ranges = [];
    this.ranges.push({label: 'Last Month', value: 'Last Month'});
    this.ranges.push({label: 'Last Week', value: 'Last Week'});
}
clearDropDown = () => {
  this.selectedRange = '';
};

模板：

<p-dropdown 
    [options]="ranges" 
    [(ngModel)]="selectedRange" 
    placeholder="Select a Date Range">
</p-dropdown>
<button (click)="clearDropDown()">Clear Date Range</button>

如果当前在下拉列表中选择了"上个月"，则单击按钮将清除下拉值(并且"选择日期范围"将再次显示(。

ps：在此示例中，"选择日期范围"是占位符文本。它不是从下拉菜单中选择的选项。在大多数情况下，这就是您想要的。

Answer 4

必须稍微挖掘源代码以查找，因为它不在文档中，但是updateSelectedOption方法对我有用。在我们的情况下，其他答案都没有用。我们有一个"自定义"选项(打开一个日历选择工具(，每次都需要选择。

模板：

<p-dropdown #dateDropdown [options]="dateOptions" [(ngModel)]="selectedDate"></p-dropdown>
<button (click)="clearSelection(dateDropdown)"></button>

组件：

clearSelection(dropdown) {    
    dropdown.updateSelectedOption(null);
}

Answer 5

在我的情况下(Primeng版本9.1.3(设置optionLabel修复了此问题。

Answer 6

您可以将属性showClear和autoDisplayFirst设置为true。

您可以在此处找到文档

<p-dropdown
    [options]="options"
    [showClear]="true"
    [autoDisplayFirst]="false"
></p-dropdown>

Answer 7

添加选项 {label: 'none', value: null}

Answer 8

由于组件不允许重置值函数，因此我在corm中实现了一个清除所有值的按钮...

它可以正常工作