Как установить значение для множественного выбора в раскрывающемся списке PrimeNg и автоматически применить фильтр для этого значения? - PullRequest
Новая
       12

Как установить значение для множественного выбора в раскрывающемся списке PrimeNg и автоматически применить фильтр для этого значения?

0 голосов
/ 19 июня 2019

У меня есть выпадающий список с предварительно определенными значениями.Я хочу, чтобы одно из этих значений было выбрано по умолчанию.Все данные должны быть отсортированы с этим предварительно выбранным значением фильтра по умолчанию.Позже, когда пользователь добавляет или удаляет фильтры, данные должны обновляться соответствующим образом.Вторая часть выполняется PrimeNg автоматически.

1 Ответ

0 голосов
/ 19 июня 2019

Я предоставляю решение для первого.

У меня есть рабочее решение. Добавление этого вопроса, чтобы он помог другим.

Вот мой мультиселектор. Он находится внутри тегов таблицы, так как я отображаю множественный выбор в столбце таблицы. Сама таблица находится внутри p-диалога. Во-первых, в вашем файле compnent.ts декальрируйте переменную, в которой будут храниться ваши значения множественного выбора. 

 resultsFilter: SelectItem[];

Затем импортируйте SelectItem по -> 

import { SelectItem } from 'primeng/components/common/api';

Затем в вашем ngOnInit добавьте значения множественного выбора -> 

 this.resultsFilter = [
            { label: 'Critical', value: 'Critical' },
            { label: 'Pass', value: 'Pass' },
            { label: 'Warning', value: 'Warning' }
        ];

Тогда в вашем HTML -> 

<p-dialog
                [visible]="someCondition"
                header="Filter Test"
                appendTo="body"
                (onHide)="hideDialog()"
                [modal]="true"
                [draggable]="true"
                [closable]="true"
                [autoAlign]="true"
                [contentStyle]="{ 'max-width': '85vw', 'max-height': '75vh' }"
                [focusOnShow]="false"
                (onShow)=" tableData.filter('Critical', 'result', 'in')"
            >

Здесь важен метод (onShow). Он будет запускать фильтр при загрузке компонента. 'result' - это имя столбца, который я хочу отфильтровать. Вот тег table, который содержит опции выбора нескольких элементов. 

<p-table
                        #tableData
                        [value]="tableData"
                        [scrollable]="true"
                        [scrollHeight]="'40vh'"
                        overflow="auto"
                        selectionMode="single"
                        [loadingIcon]="'fa-spinner'"
                        [loading]="loadingResults"
                        [paginator]="false"
                    >

<p-multiSelect
                                        [options]="resultsFilter"
                                        defaultLabel="Critical"
                                        [(ngModel)]="selectedFilter"
                                        (onChange)="
                                            tableData.filter($event.value, 'result', 'in')
                                        "
                                        [style]="{
                                            width: '95%',
                                            height: '25px',
                                            'margin-top': '0.75rem'
                                        }"
                                        class="ui-column-filter"
                                        appendTo="body"
                                        [filter]="true"
                                        maxSelectedLabels="0"
                                        selectedItemsLabel="{0} selected"
                                    ></p-multiSelect>

Метод (onChange) автоматически фильтрует результаты на основе значения, выбранного в раскрывающемся фильтре. Имя здесь должно совпадать с идентификатором, который вы присвоили своей таблице. В этом случае это # ​​tableData

В моем файле component.ts это то, что у меня есть -> 

if (this.selectedFilter === undefined) {
            this.selectedFilter = ['Critical'];
        }

В моей функции hideDialog () это то, что я добавил. Причина этого заключается в том, что всякий раз, когда я закрываю диалоговое окно и открываю его, он всегда будет предварительно выбирать значение фильтра как «Критическое». 

 this.selectedFilter = ['Critical'];

Ожидаемый результат заключается в том, что фильтр должен быть предварительно выбран в соответствии со значением, установленным в файле component.ts, а данные, отображаемые в HTMl, должны автоматически фильтроваться на основе предварительно выбранного значения. С вышеупомянутым решением это работает отлично.

...