Question

我有一个带有预定义值的多选下拉列表。我希望默认选择这些值之一。默认情况下，所有数据都应使用此预先选择的过滤器值进行排序。以后，当用户添加或删除过滤器时，数据应相应地更新。第二部分由PrimeNg自动处理。

Answer 1

我正在为第一个解决方案。

我有一个可行的解决方案。添加此问题，以便对其他人有帮助。

这是我的多项选择。因为我在表格列上显示多重选择，所以它在表格的标签内。该表格本身位于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）方法在这里很重要。组件加载时将触发过滤器。 “结果”是我要过滤的列的名称。这是表格的标记，其中包含多个选择选项。

<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）方法将根据您在下拉过滤器中选择的值自动过滤结果。此处的名称应与您分配给表的ID相匹配。在这种情况下，它是#tableData

在我的component.ts文件中，这就是我的->

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

在我的hideDialog（）函数中，这是我添加的内容。这样做的原因是，每当我关闭对话框并打开它时，它将始终将过滤器值预先选择为“关键”。

 this.selectedFilter = ['Critical'];

预期结果是，应将筛选器预先选择为component.ts文件中设置的值，并且应基于预先选择的值自动筛选HTM1上显示的数据。通过上述解决方案，它可以完美运行。

如何在PrimeNg中为多选下拉菜单设置一个值并自动对该值强制过滤？

1 个答案: