https://www.primefaces.org/primeng/#/table のドキュメントによると、resetメソッドは「ソート、フィルター、およびページネーターの状態をリセットする」必要があります。問題は、テーブルのリセットメソッドがUIからフィルターを削除していないことです。 (ただし、table.tsのフィルターフィールドはリセット後は{}です)
this 複製したところをご覧ください。コードを見ることができます ここ 失敗フィールド(または他のフィールド)で要約テーブル(例を参照)をフィルタリングします。リセットを押します。 =>テーブル値はリセットされますが、フィルター値は引き続き表示されます。
この例は基本テーブルを使用していますが、動的列でも機能しません。
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" [pSortableColumn]="col.field">
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</th>
</tr>
<tr>
<th *ngFor="let col of columns">
<input pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')">
</th>
</tr>
入力からフィルターをクリアする方法について何かアイデアはありますか?
修正しました ここ
入力フィールドには、追加するだけです
[value]="dt.filters[<field>] ? dt.filters[<field>].value : ''"
ここで、<field>
は、(input)
メソッドで送信されるフィールドです。
(input)="dt.filter($event.target.value,<field>, 'contains')"
例えば:
<th>
<input pInputText type="text" (input)="dt.filter($event.target.value, 'date', 'contains')"
[value]="dt.filters['date'] ? dt.filters['date'].value : ''">
</th>
次のように入力にngModelを追加するとどうなりますか。
<input pInputText type="text" [(ngModel)]="dt22" (input)="dt.filter($event.target.value, 'date', 'contains')">
コードで定義します:
dt22:string = '';
次に、onClickは次のようになります。
onClick() {
this.dt22 = '';
this.table.reset();
}
これには追加のコードが必要になることはわかっていますが、これは間違いなく機能します(stackblitzコードで試してみました)
P-multiSelectsに関する質問を拡張すると、ngModel
プロパティをデータテーブルのフィルターの値のチェックにバインドすることで、これを修正できます。これと同じアプローチを入力フィールドにも使用できます。
入力フィールドの場合:
_<input pInputText placeholder='Search'
type='text'
[ngModel]="dt.filters['foobar']? dt.filters['foobar'].value : ''"
(input)="dt.filter($event.target.value, 'foobar', 'contains')"
>
_
P-multiSelectドロップダウンの場合:
_<p-multiSelect appendTo="body"
[options]="[{label: 'Foo', value: 'Foo'}, {label: 'Bar', value: "Bar'}]"
[ngModel]="dt.filters['foobar']? dt.filters['foobar'].value: []"
(onChange)="dt.filter($event.value, 'foobar', 'in')">
</p-multiSelect>
_
最後に、Table.reset()
を呼び出すと、すべての並べ替え、フィルタリング、およびページ付けが完全にリセットされます。