PrimeNg DropDown - 用户无法清除该值答案

【问题标题】：PrimeNg DropDown - User can't clear the valuePrimeNg DropDown - 用户无法清除该值
【发布时间】：2022-02-24 00:04:33
【问题描述】：

我正在我的 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>

除了一件烦人的事情之外，一切都很好：

一旦用户选择了一个选项，他不能清除选择的值...

你能帮帮我吗？

【问题讨论】：

像大多数不开箱即用的下拉菜单一样，您必须提供自己的按钮，以编程方式清除它。
谢谢彼得，我认为这是唯一不扩展对象的解决方案...
我想是的，举个例子，看看这个其他的stackoverflow帖子。它没有使用 primeNg，但是您可以从 plunks 中获得一些想法。 stackoverflow.com/questions/26389542/…

标签： angular primeng

【解决方案1】：

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

【讨论】：

为什么没有在primeng文档中记录？
这个答案可以使用更多上下文
至少现在它被记录在primeng中，并且可以工作。

【解决方案2】：

要清除选定的下拉值，只需将选定的选项设置为空字符串。例如，这里有一个下拉菜单，用户可以选择“上个月”或“上周：”

组件

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：在此示例中，“选择日期范围”是占位符文本。它不是下拉列表中的可选选项。在大多数情况下，这就是您想要的。

【讨论】：

如果你还有一个 p-dropdowns 之前的过滤器值将被设置为选择一个日期范围，它必须是我之前选择的过滤器的值，直到我清除所有值

【解决方案3】：

为了解决这个问题，我必须为下拉菜单设置一个占位符。我使用的代码是这样的：

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>;
}
...

当上面的代码运行没有占位符时，当前选中的选项保持选中状态。

当上面的代码使用占位符运行时，下拉菜单的值会更改为提供的占位符。

【讨论】：

如果唯一的目标是重置下拉值，则不需要 @ViewChild。请在下面查看我的答案。
我相信，根据 PrimeNg 的版本，您可以将 autoDisplayFirst 设置为 false 并将 showClear 设置为 true 以获得相同的效果。 [showClear]="true" [autoDisplayFirst]="false"
可以使用resetFilter();如果你想通过对象清除
使用占位符的问题是您是否也在使用自定义模板。这意味着你不能同时拥有两者。这是奇怪的，糟糕的工程。

【解决方案4】：

不得不深入研究源代码才能找到，因为它不在文档中，但 updateSelectedOption 方法对我有用。在我们的案例中，其他答案均无效。我们有一个“自定义”选项（打开日历选择工具），需要每次都可选择。

模板：

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

组件：

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

【讨论】：

【解决方案5】：

在我的情况下（primeng 版本 9.1.3）设置 optionLabel 解决了这个问题。

【讨论】：

【解决方案6】：

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

【讨论】：

不适用于自定义绑定和模板。

【解决方案7】：

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

正常工作

【讨论】：

那么你的按钮有什么作用？
它只是重置绑定的值，就是这样。它将它设置为null，这样用户可以重置值