PrimeNg DropDown - 用户无法清除该值

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

由于组件不允许重置值功能，我在表单中实现了一个清除所有值的按钮...

正常工作

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

要清除 selected 下拉值，只需将 selected 选项设置为空字符串即可。例如，这是一个下拉菜单，让用户 select "Last Month" 或 "Last Week:"

组件

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>

如果 'Last Month' 当前在下拉列表中 select，单击该按钮将清除下拉列表值（并且 'Select a Date Range' 将再次显示）。

PS：在本例中，'Select a Date Range' 是占位符文本。它不是下拉列表中的 select 可用选项。在大多数情况下，这就是您想要的。

Answer 4

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

Answer 5

不得不深入研究源代码才能找到，因为它不在文档中，但是 updateSelectedOption 方法对我有用。 None 的其他答案适用于我们的案例。我们有一个 "custom" 选项（打开日历选择工具），每次都需要选择它。

模板：

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

组件：

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

Answer 6

在我的例子中（primeng 版本 9.1.3）设置 optionLabel 解决了这个问题。

Answer 7

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

PrimeNg DropDown - 用户无法清除该值

PrimeNg DropDown - User can't clear the value

primeng

angular