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つの厄介なことを除いて、すべて正常に動作します。
ユーザーがオプションを選択すると、選択した値をクリアできません ...
手伝って頂けますか?
これを修正するには、ドロップダウンのプレースホルダーを設定する必要がありました。私が使用したコードは次のようなものです。
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>;
}
...
上記のコードを実行すると、withoutプレースホルダーが実行され、現在選択されているオプションが選択されたままになります。
上記のコードを実行すると、withプレースホルダーになり、ドロップダウンの値が指定されたプレースホルダーに変わります。
選択したドロップダウン値をクリアするには、選択したオプションを空の文字列に設定するだけです。たとえば、ユーザーが「先月」または「先週」を選択できるドロップダウンを次に示します。
成分
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:この例では、「日付範囲の選択」はプレースホルダーテキストです。ドロップダウンから選択できるオプションではありません。ほとんどの場合、これはあなたが望むものです。
[showClear]="true"
OR editable="true"
要件に基づいてshowClear
プロパティまたは編集可能なプロパティを追加してください。これはあなたのユースケースに完璧に機能します