PrimeNg DropDown - 用户无法清除值

我在我的Angular2应用程序中实现primeNg下拉组件。PrimeNg DropDown - 用户无法清除值

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

所有作品，除了一个annoing件事罚款：

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

你能帮助我吗？

来源

2017-05-31 DarioN1

与大多数不是开箱即用的下拉菜单一样，您必须提供自己的按钮，以编程方式清除它。 – PeterS

感谢彼得，我认为它唯一的解决方案，没有扩大对象... – DarioN1

我这样想，给你一个例子，检查这个其他stackoverflow帖子。它不使用primeNg，但是你可以从plunks中得到一些想法。 https://stackoverflow.com/questions/26389542/clear-selected-option-in-ui-select-angular – PeterS

为了解决这个问题，我不得不设置下拉的占位符。我使用的代码是一样的东西：

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

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

当上面的代码运行与的占位符，下拉的值改变到所提供的占位符。

来源

2017-07-07 16:49:38

@ViewChild不需要，如果唯一的目标是重置下拉值。请参阅下面的答案。 – Stevethemacguy

由于该组件没有允许重置价值的功能，我在表格中清除所有值来实现一键...

它可以正常工作

来源

2017-06-07 07:07:20 DarioN1

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

组件

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：在本例中，“选择日期范围”是占位符文本。这不是从下拉菜单中选择的选项。在大多数情况下，这是你想要的。

来源

2017-09-15 19:30:09 Stevethemacguy

PrimeNg DropDown - 用户无法清除值

回答

相关问题