問題タブ [virtualscroll]

私のページは、*ngFor ディレクティブによって作成されたいくつかのng-select (カスタム サーバー側検索) ドロップダウンで構成され、各ドロップダウンから複数の項目を選択する可能性があります。

仮想スクロール機能も含めたいのですが、別のサーバー リクエストを作成し、filterValues$値を更新して新しいデータを含める方法がわかりません。

component.html

component.ts

どんな助けでも大歓迎です！

更新されたコードで編集:仮想スクロール機能を実装することができましたが、ドロップダウンの一番下に移動するたびに、fetchMore()メソッドがトリガーされ、値がリセットさthis.filterValues$[filterName]れ、ドロップダウンが下から上に移動します。どうすればそれを防ぐことができますか?

Cordovaアプリで JS を使用して構築された仮想スクロール リストがあり、各スクロール後にビューポートの上部にあった正確なノードを保存したいと考えています。仮想スクロールの複雑な点はscrollTop、ノードがリストの上部と下部から削除され、スクロール位置が変わるため、使用が信頼できないことです。Javascriptでこれを行うための信頼できるパフォーマンスの高い方法はありますか? ユースケースは次のとおりです。ユーザーがアプリを閉じて再度開いたときに、ユーザーを同じスクロール位置に配置し、その位置にある要素が、ユーザーがアプリを閉じる直前に最後に見た要素であることを確認したいと考えています。私はこの戦略を検討しています：

• 次のように、各スクロールのリストの一番上にある要素を取得します。

• その要素の識別子を保存して、アプリの初期化時にリストをプリロードして、要素が常にその位置にレンダリングされるようにする

JS ベースの仮想スクローラーでこの問題に対処するための他の戦略があるかどうかを知りたいです。Javascript で仮想スクローラーを構築するためのチュートリアルを見たことがありますが、この問題を回避する方法に関する実装の詳細を提供するチュートリアルは見たことがありません。前もって感謝します！

更新 1

仮想スクロール リストには多数のノードがあり、それぞれに独自の子ノードがあり、100 を超えることもあります。これにより独自の問題が発生するため、メイン スレッドのブロックを回避するために、ノードのリストを反復処理したり、各ノードで高価な操作を実行したりする必要がないソリューションが (可能な場合) 重要です。

垂直仮想スクロールのあるサイドバーがあります。このスクロール コンテナー内のアイテムにカーソルを合わせると、ポップオーバーが表示され、アイテムに関する詳細情報が表示されます (たとえば、コンテナーの幅が十分でないため、コンテナー内の名前が省略され、ユーザーがアイテムの上にカーソルを合わせると、ポップオーバーが表示されます)。フルネームで表示されます）。ngx-virtual-scroller を使用すると、ポップオーバーによって水平スクロールバーが表示され、ポップオーバーが仮想スクローラーによってクリップされます。

通常のスクロール コンテナでこれを試してみると、これは起こりません。

さらに調査したところ、これは仮想スクローラーの相対的な位置に関係していることがわかりましたが、解決策を見つけることができません...

この問題を克服する方法を知っていますか?

仮想スクローラーの問題

期待される結果 (通常のスクロール コンテナーで達成される)

コンポーネントのオーバーレイ内に仮想スクロールとカスタム検索入力を使用して、angular-material select コンポーネント (v10) に基づいて、カスタムの複数選択コンポーネントを作成しようとしています。mat-select-triggerまた、選択されたアイテムのデフォルトのリストの代わりに、選択されたアイテムの数を表示する要素を追加しました。

(ほぼ完全に機能し、スタイリングなしの) サンプルは、このstackblitzにあります。

私が抱えている問題は、選択したアイテムの表示値に関連しています。

問題を再現するには、次のことを行う必要があります。

1. アイテムのリストを検索し (例: 55)、オプションを選択します (例: item-55)
2. オーバーレイの外側をクリックして閉じます
3. 予想どおり、コンポーネントが表示1 selectedされ、アイテムが下の [選択されたアイテム]リストに表示されます。
4. リストを再度開き、検索フィールドclearボタンをクリックしてから、オーバーレイの外側をクリックして再度閉じます。

コンポーネントは、表示されItemsているはずのときにプレースホルダーを表示します1 selected。これは、項目がまだ [選択された項目]リストにあるためです (要素で使用されているのはこのリストですmat-select-trigger)。

それでも、リストを再度開いて選択した項目 ( item-55) までスクロールすると、その項目が選択されます。オーバーレイの外側をクリックして再度閉じると、正しい値が表示されます ( 1 selected)。

仮想スクロール関連の問題であることは理解していますが、解決策や回避策を見つけることができませんでした。

どんな提案でも大歓迎です！