問題タブ [angular-cdk-virtual-scroll]

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 の修正/回避策を探しています。

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

固定ヘッダーを使用して動作する仮想スクロール テーブルを探しているので、素晴らしい Cdk を見つけましたが、ドキュメントを理解するのは非常に困難です。現在、 と を組み合わせようとしてCdkTableいCdkVirtualScollます。

私が見つけたすべての実例はマテリアルテーブルを使用していますが、私は使用していません。

では、どうすれば仕事に就くことができるCdkVirtualScollでしょうか？これが私がこれまでに行ったことです（例から）：

ドキュメントに書かれているように、テーブルはスクロール ビューポートにラップされました。しかし、今をどこでどのように設定でき*cdkVirtualForますか?

助けてくれてありがとう！