你可以如何在PRIMENG中设置p-columnFilter的默认值?

huangapple go评论70阅读模式
英文:

How can I set the default value for a p-columnFilter in PRIMENG?

问题

PRIMENG是用于Angular的组件库,我正在使用它们的p-table组件来显示来自数据库的数据。表格中显示的一列包含布尔值,我想要为该列的过滤器设置默认值为true

以下是表格的示例HTML代码:

<p-table class="my-table"
            [value]="(myValues$ | async)"
            [scrollable]="true"
            scrollHeight="flex"
            [virtualScroll]="true"
            selectionMode="single">
    <ng-template pTemplate="header">
        <tr>
            <th>
                Some Boolean
                <div>
                    <!-- 
                   我如何将过滤器设置为默认仅显示
                   someBoolean == true 的项目?
                    -->
                    <p-columnFilter type="boolean" field="someBoolean"></p-columnFilter>
                </div>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-val>
        <tr [pSelectableRow]="val">
            <td>
                <i class="pi" [ngClass]="{'true-icon pi-check': val.someBoolean, 'false-icon pi-times': !val.someBoolean}"></i>
            </td>
        </tr>
    </ng-template>
</p-table>

属性myValues$是一个Observable<MyValue[]>,而MyValue类似于:

export interface MyValue {
    someBoolean: boolean;
}

如何设置过滤器,仅显示someBooleantrue的项目?

一些年前有人提出了完全相同的问题,但没有人回答,所以我再次提问。

我尝试在PRIMENG文档中查找任何defaultvalue属性,但没有找到。作为一种变通方法,我预先对从数据库返回的数据进行了排序,如下所示:

myValues$: Observable<MyValue[]> = getData().pipe(
  // 根据'someBoolean'排序,其中'true'排在'false'之前
  map(mvs => [...mvs].sort((a, b) => a.someBoolean < b.someBoolean ? 1 : -1))
);

但这当然仍然显示所有数据(只是排序了)。我希望如果我可以为列过滤器使用默认值,仅显示someBooleantrue的数据。

英文:

PRIMENG is a component library for Angular and I'm currently using their p-table component to dislpay data from a database. One of the columns displayed in the table contains a boolean value, and I'd like to have a default true value for that column filter.

Here's an example HTML for the table:

&lt;p-table    class=&quot;my-table&quot;
            [value]=&quot;(myValues$ | async)!&quot;
            [scrollable]=&quot;true&quot;
            scrollHeight=&quot;flex&quot;
            [virtualScroll]=&quot;true&quot;
            selectionMode=&quot;single&quot;&gt;
    &lt;ng-template pTemplate=&quot;header&quot;&gt;
        &lt;tr&gt;
            &lt;th&gt;
                Some Boolean
                &lt;div&gt;
                    &lt;!-- 
                   How can I set the filter to only show
                   items where someBoolean == true by default? 
                    --&gt;
                    &lt;p-columnFilter type=&quot;boolean&quot; field=&quot;someBoolean&quot;&gt;&lt;/p-columnFilter&gt;
                &lt;/div&gt;
            &lt;/th&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate=&quot;body&quot; let-val&gt;
        &lt;tr [pSelectableRow]=&quot;val&quot;&gt;
            &lt;td&gt;
                &lt;i class=&quot;pi&quot; [ngClass]=&quot;{&#39;true-icon pi-check&#39;: val.someBoolean, &#39;false-icon pi-times&#39;: !val.someBoolean}&quot;&gt;&lt;/i&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
&lt;/p-table&gt;

The property myValues$ is an Observable&lt;MyValue[]&gt; and MyValue is something like:

export interface MyValue {
    someBoolean: boolean;
}

How can I set the filter to only show items where someBoolean is true?

Someone else had the exact same question a few years back, but nobody bothered to answer so I'm asking again.

I tried looking for any default or value properties in the PRIMENG docs, but found nothing. As a bit of a workaround, I pre-sorted the data returned from the database like:

myValues$: Observable&lt;MyValue[]&gt; = getData().pipe(
  // Sorts by &#39;someBoolean&#39; where &#39;true&#39; comes before &#39;false&#39;
  map(mvs =&gt; [...mvs].sort((a, b) =&gt; a.someBoolean &lt; b.someBoolean ? 1 : -1))
);

But this of course still displays all the data (it's simply sorted). I would prefer it if I could use a default value for the column filter to only display the data where someBoolean is true.

答案1

得分: 3

Default filter state can be set using the Table.filters property:

import { FilterMetadata } from "primeng/api";
...
readonly filters: { [key in keyof MyValue]: FilterMetadata[] } = {
  someBoolean: [{ value: true, matchMode: "contains", operator: "and" }]
};
<p-table ... [filters]="filters">
  ...
</p-table>

StackBlitz

英文:

Default filter state can be set using the Table.filters property:

import { FilterMetadata } from &quot;primeng/api&quot;;
...
readonly filters: { [key in keyof MyValue]: FilterMetadata[] } = {
  someBoolean: [{ value: true, matchMode: &quot;contains&quot;, operator: &quot;and&quot; }]
};
&lt;p-table ... [filters]=&quot;filters&quot;&gt;
  ...
&lt;/p-table&gt;

StackBlitz

huangapple
  • 本文由 发表于 2023年4月17日 16:02:41
  • 转载请务必保留本文链接:https://go.coder-hub.com/76032907.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定