PrimeNG: обновить таблицу с отфильтрованными значениями - PullRequest
Новая
       45

PrimeNG: обновить таблицу с отфильтрованными значениями

0 голосов
/ 05 ноября 2019

Я пытаюсь отфильтровать данные, которые хранятся в раскрывающемся списке. Поле фильтра должно быть вне выпадающих опций, поэтому мне нужно было создать собственную функцию фильтрации. Я беру входную строку (например, «Jan») и пытаюсь найти соответствующее числовое значение (в данном случае: «Jan» = 1). Затем я просматриваю данные и вижу, совпадает ли какой-либо из месяцев с этим числовым значением. Когда я распечатываю возвращенные данные, кажется, что я получаю правильный вывод. Однако, когда я пытаюсь обновить данные, которые использует таблица, она не меняется. 

**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;
    }

1 Ответ

0 голосов
/ 05 ноября 2019

Правильные данные не заполняются, потому что вы используете один и тот же объект даже после фильтрации, а таблица PrimNg Turbo использует onPush стратегию обнаружения изменений. Попробуйте изменить код ниже 

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

ИЛИ 

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

Это должно работать.

...