Question

我正在Angular2应用程序中实现primeNg下拉组件。

unsigned long long

除了一件令人讨厌的事情外，一切正常：

一旦用户选择了一个选项，他无法清除所选值 ......

你能帮助我吗？

Answer 1

要清除所选的下拉列值，只需将所选选项设置为空字符串即可。例如，这是一个下拉菜单，让用户选择＆＃34;上个月＆＃34;或者＆＃34;上周：＆＃34;

组件

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>

如果＆＃39;上个月＆＃39;当前在下拉菜单中选中，点击该按钮将清除下拉值（并且将再次显示＆＃39;选择日期范围＆＃39;）

PS：在此示例中，＆＃39;选择日期范围＆＃39;是占位符文本。它不是下拉列表中的可选选项。在大多数情况下，这就是你想要的。

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

由于未在文档中找到源代码，因此需要对其进行一些挖掘，但是updateSelectedOption方法为我解决了这个问题。在我们的案例中，没有其他答案有效。我们有一个“自定义”选项（打开日历选择工具），该选项每次都需要选择。

模板：

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

组件：

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

Answer 4

<a href="@item.Link" class="text-default" onclick="window.open('@item.Link', 'newwindow', 'width=1000, height=1000'); return false;">Link</a>或[showClear]="true" 请根据您的要求添加editable="true"属性或可编辑属性。这非常适合您的用例

Answer 5

就我而言（主要版本9.1.3）设置optionLabel修复了此问题。

Answer 6

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

它正常运作

PrimeNg DropDown - 用户无法清除该值

6 个答案: