web-dev-qa-db-ja.com

primeNGテーブルのフィルター値をリセットします

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>

入力からフィルターをクリアする方法について何かアイデアはありますか？

primeng
4
Cosmin Ionascu

修正しました ここ

入力フィールドには、追加するだけです

[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>
4
Cosmin Ionascu

次のように入力に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コードで試してみました）

2
Woworks

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()を呼び出すと、すべての並べ替え、フィルタリング、およびページ付けが完全にリセットされます。

0
MrAlexBailey