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 - 用戶無法清除值

回答

相關問題