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> 

すべて1つのannoingの事を除いて正常に動作します：ユーザーがオプションを選択した時点たら

、彼が選択した値をクリアすることはできません...

あなたは私を助けることができますか？それは、この問題を解決するには、適切

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

選択したドロップダウン値をクリアするには、選択したオプションを空の文字列に設定します。

コンポーネント

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> 

場合：たとえば、ここでユーザが「先週」を「先月」を選択したりしてみましょうドロップダウンですドロップダウンで現在選択されている場合は、ボタンをクリックするとドロップダウン値がクリアされます（また、 'Select a Date Range'が再度表示されます）。

PS：この例では、[日付範囲を選択]はプレースホルダテキストです。ドロップダウンからは選択可能なオプションではありません。ほとんどの場合、これはあなたが望むものです。