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>
<!--
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>
Свойство myValues$
— это Observable<MyValue[]>
, а MyValue
— что-то вроде:
export interface MyValue {
someBoolean: boolean;
}
Как настроить фильтр так, чтобы отображались только элементы, где someBoolean
есть true
?
У кого-то еще был точно такой же вопрос несколько лет назад, но никто не удосужился ответить, поэтому я спрашиваю снова.
Я пытался найти какие-либо свойства default
или value
в документах PRIMENG, но ничего не нашел. В качестве обходного пути я предварительно отсортировал данные, возвращаемые из базы данных, например:
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))
);
Но это, конечно, все еще отображает все данные (просто они отсортированы). Я бы предпочел, чтобы я мог использовать значение по умолчанию для фильтра столбца, чтобы отображать только данные, где someBoolean
есть true
.
Состояние фильтра по умолчанию можно установить с помощью свойства Table.filters
:
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>