2

PrimeNG のテーブル コンポーネントで仮想スクロールとフィルタリング機能を組み合わせようとしたときに、バグと思われるものに遭遇しました。

両方の機能を有効にしてフィルタリングしようとしても、レンダリングされたデータはフィルタリングされませんが、呼び出されるprimengフィルター関数を介してデバッグすることができ、基礎となるものが実際にフィルタリングされることを確認できます。私の疑いは、これが何かであるということですCDK仮想スクローラーインスタンスが内部でどのように利用されているかの内部にもっと関係があります。

複製可能なデモ- https://stackblitz.com/edit/primeng9-table-virtualscroll-with-filtering?file=src/app/app.component.html

上記の URL を使用して、返されたデータの列 (ブランド名など) でフィルタリングするだけです。

この最初のデモでは、仮想スクロールを使用します。また、フィルタリング中にコンソール出力を観察してください。ここでは、onFilter テーブル イベントの結果をキャプチャし、フィルタリングされた入力検索用語に一致するフィルタリングされたレコードの長さをカウントしています。結果が明らかに一致して返されていることがわかりますが、テーブル内の行はそれに応じてフィルター処理されることはなく、元のレンダリングされた行が常に表示されます。

PrimeNG 内での CDK 仮想スクローラーの使用のせいだと思うという私の疑いをさらに証明するために、stackblitz デモで次の 2 つのテーブル属性を削除できます。

[virtualScroll]="true" [virtualRowHeight]="34"

これらを削除して仮想スクロールを無効にすると、テーブルに一致する結果のみを表示するという点でフィルタリング機能は期待どおりに機能しますが、もちろん、仮想スクロールを有効にすることによるパフォーマンス上の利点は失われます。

だから私の質問は、どうすれば両方をここに置くことができますか?

ところで - はい、私は PrimeNG 9 を使用しており、10 が最新ですが、さまざまな理由で、私が取り組んでいるプロジェクトはまだ 9 であり、しばらくの間使用されるため、可能であればここで v9 の修正/回避策を探しています。

御時間ありがとうございます！

4

1 に答える 1

0

いくつかのテストの後、この問題は使用しているバージョンによるものであることがわかりました。おっしゃるとおり、バージョンアップはできませんが、ダウングレードはどうでしょうか？

    {
      "name": "qgnirxral.github",
      "version": "0.0.0",
      "private": true,
      "dependencies": {
        "@angular/animations": "~9.1.9",
        "@angular/cdk": "~9.2.4",
        "@angular/common": "~9.1.9",
        "@angular/compiler": "~9.1.9",
        "@angular/core": "^9.1.9",
        "@angular/forms": "~9.1.9",
        "@angular/platform-browser": "~9.1.9",
        "@angular/platform-browser-dynamic": "~9.1.9",
        "@angular/router": "~9.1.9",
        "@fullcalendar/core": "4.4.0",
        "@types/jasmine": "3.3.10",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "^12.11.1",
        "primeflex": "^1.1.1",
        "primeicons": "^2.0.0",
        "primeng": "9.0.6",
        "quill": "^1.3.7",
        "rxjs": "^6.6.3",
        "rxjs-compat": "^6.6.3",
        "tslib": "^1.13.0",
        "web-animations-js": "2.3.2",
        "zone.js": "0.10.2"
      },
      "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
      },
      "devDependencies": {
        "@angular-devkit/build-angular": "~0.901.7",
        "@angular/cli": "^9.1.7",
        "@angular/compiler-cli": "~9.1.9",
        "@types/jasmine": "3.3.10",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "^12.11.1",
        "codelyzer": "^5.1.2",
        "jasmine-core": "~3.5.0",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "^5.0.9",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage-istanbul-reporter": "^3.0.3",
        "karma-jasmine": "^2.0.1",
        "karma-jasmine-html-reporter": "^1.5.4",
        "protractor": "~5.4.2",
        "ts-node": "~8.0.2",
        "tslint": "~5.12.1",
        "typescript": "~3.8.3"
      }
    }

パッケージのバージョンを にダウングレードしましたが、問題9.0.6なく動作します。

変更を加えた例を次に示します

https://stackblitz.com/edit/primeng9-table-virtualscroll-with-filtering-ok5cvp?file=src/app/app.component.html

最新バージョンに更新できるまで、問題をダウングレードして修正していただければ幸いです。

于 2020-11-18T16:13:53.913 に答える