英文:
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;
}
如何设置过滤器,仅显示someBoolean
为true
的项目?
一些年前有人提出了完全相同的问题,但没有人回答,所以我再次提问。
我尝试在PRIMENG文档中查找任何default
或value
属性,但没有找到。作为一种变通方法,我预先对从数据库返回的数据进行了排序,如下所示:
myValues$: Observable<MyValue[]> = getData().pipe(
// 根据'someBoolean'排序,其中'true'排在'false'之前
map(mvs => [...mvs].sort((a, b) => a.someBoolean < b.someBoolean ? 1 : -1))
);
但这当然仍然显示所有数据(只是排序了)。我希望如果我可以为列过滤器使用默认值,仅显示someBoolean
为true
的数据。
英文:
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:
<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>
<!--
How can I set the filter to only show
items where someBoolean == true by default?
-->
<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>
The property myValues$
is an Observable<MyValue[]>
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<MyValue[]> = getData().pipe(
// Sorts by 'someBoolean' where 'true' comes before 'false'
map(mvs => [...mvs].sort((a, b) => a.someBoolean < 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>
英文:
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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论