PrimeNG:使用过滤值更新表 [英] PrimeNG: Update Table with Filtered Values

问题描述

我正在尝试过滤存储在下拉列表中的数据.过滤器框应该在下拉选项之外，所以我需要创建一个自定义过滤功能.我获取输入字符串(例如Jan")并尝试找到匹配的数值(在本例中:Jan"= 1).然后我查看数据，看看是否有任何月份与该数值匹配.当我打印出返回的数据时，似乎我得到了正确的输出.但是，当我尝试更新表使用的数据时，它并没有改变.

I am trying to filter data that is being stored in a dropdown. The filter box is supposed to outside of the drop down options so I needed to create a custom filtering function. I take the input string (such as "Jan") and try to find the matching numerical value (in this case: "Jan" = 1). Then I look through the data and see if any of the months match that numerical value. When I print out the returned data, it seems I am getting the correct output. However, when I try to update the data that the table uses, it doesn't change.

**HTML:**
<p-table #tt [value]="data" (onFilter)="filter($event)"....>

<input pInputText type="text" class="colmsearch"
placeholder="Search" 
(input)="tt.filter($event.target.value, 'month', 'contains')">

.
.
.
<p-dropdown formControlName="month" class="dropdownInput" *ngSwitchCase="'month'"
[options]="monthLabels"></p-dropdown>

</p-table>

**TS:**
this.data = [
    {id: 03, name: 'First', month: 1},
    {id: 04, name: 'Second', month: 2},
    {id: 05, name: 'Third', month: 1},
    .
    .
    {id: 07, name: 'Fourth', month: 3}

];

this.monthLabels = [
    {label: "Jan", value: 1},
    {label: "Feb", value: 2},
    {label: "Mar", value: 3},
    .
    .
    {label: "Dec", value: 12}
];

newValues: any[];

public filter(event){
        if (event.filters.month) {
            this.newValues = this.filterHelper(event.filters.month.value);
            this.data = this.newValues;
        }
        else {

            this.data = this.origData; //origData: a value that stores the unaltered original data
        }
}

    public filterHelper(filterV) {
        //Step 1: Find the number values that are associated with
        this.newMonths = []

        for (let i = 0; i < 12; i++) {
            if (this.monthLabels[i].label.toLowerCase().includes(filterV)) {
                this.newMonths.push(this.monthLabels[i].value);

            }
        }

        //Step 2: Find the associated data with that value
        this.newData = [];

        for (let i = 0; i < this.data.length; i++) {
            for (let j = 0; j < this.newMonths.length; j++) {
                if (this.data[i].month == this.newMonths[j]) {
                    this.newData.push(this.data[i]);
                }
            }
        }

        return this.newData;
    }

推荐答案

Correct data is not populating 因为，即使经过过滤，您仍在使用相同的对象，并且 PrimNg Turbo 表使用 onPush 更改检测策略.尝试修改下面的代码

Correct data is not populating because, you are using the same object even after filter, And PrimNg Turbo table use onPush change detection strategy. Try modify below code

 this.data = [...this.newValues]; // in filter method

或

this.newData.push(Object.assign(this.data[i])); // during filtering

它应该可以工作.

这篇关于PrimeNG:使用过滤值更新表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！