Как установить значение по умолчанию для p-columnFilter в 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>
                    <!-- 
                   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.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
0
245
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Состояние фильтра по умолчанию можно установить с помощью свойства 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>

СтекБлиц

Другие вопросы по теме