0

ドロップダウンに保存されているデータをフィルタリングしようとしています。フィルター ボックスはドロップ ダウン オプションの外側にあるはずなので、カスタム フィルター機能を作成する必要がありました。入力文字列 ("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;
    }
4

1 に答える 1

2

フィルターの後でも同じオブジェクトを使用しているため、正しいデータが入力されていません。また、PrimNg Turbo テーブルはonPush変更検出戦略を使用しています。以下のコードを変更してみてください

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

また

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

それはうまくいくはずです。

于 2019-11-05T12:12:51.120 に答える