web-dev-qa-db-ja.com

PrimeNgDropDown-ユーザーは値をクリアできません

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つの厄介なことを除いて、すべて正常に動作します。

ユーザーがオプションを選択すると、選択した値をクリアできません ...

手伝って頂けますか？

angularprimeng
4
DarioN1

これを修正するには、ドロップダウンのプレースホルダーを設定する必要がありました。私が使用したコードは次のようなものです。

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プレースホルダーになり、ドロップダウンの値が指定されたプレースホルダーに変わります。

3
Daniel Neel

選択したドロップダウン値をクリアするには、選択したオプションを空の文字列に設定するだけです。たとえば、ユーザーが「先月」または「先週」を選択できるドロップダウンを次に示します。

成分

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：この例では、「日付範囲の選択」はプレースホルダーテキストです。ドロップダウンから選択できるオプションではありません。ほとんどの場合、これはあなたが望むものです。

3
Stevethemacguy

[showClear]="true" OR editable="true"要件に基づいてshowClearプロパティまたは編集可能なプロパティを追加してください。これはあなたのユースケースに完璧に機能します

0
user2566954