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

アコーディオンに仮想スクロールを追加しました。アコーディオンの中にページ番号付きの画像があります。

検索ボックスに値を入力したら、ページ番号が存在する位置までスクロールしたい。

scrollToViewJavaScriptの方法で追加してみました。しかし、すべてのページが DOM への仮想スクロールで同時にレンダリングされるわけではないため、このロジックは機能しませんでした。検索したページにスクロールできる他の方法はありますか。ページは昇順ではなく、順序が異なる場合があることに注意してください。

このビューポートは親コンポーネントにあります。アコーディオンは別の子コンポーネントにあります。

私のAngularアプリには次のケースがあります。

場合 ：

select基本的にスタイリングとロジックを実行し、入力のリストを描画するカスタム入力があります。

(簡略化) :

そして app-select テンプレートで私はただ行います

簡単な例: https://stackblitz.com/edit/angular-pwdm7r?file=src/app/app.component.ts

問題 ：

*ngFor今、これを最小限のコードで実質的にスクロールできるようにしたいと思います。

1 つの方法は、仮想スクロールを使用するたびにこれを行うことです。

しかし、私が作ろうとしている解決策はcdk-virtual-scroll-viewport、セレクターコンポーネント内にシングルを書くことです

このように => https://stackblitz.com/edit/angular-fuw1fu?file=src/app/app.component.html

NullInjectorError: CdkVirtualScrollViewport のプロバイダーがありません!

ng-contentそのため、 cdkVirtualFor が存在する場合にのみ、コンテンツを読み取って添付しようとしました。

https://stackblitz.com/edit/angular-ax3yvu?file=src/app/select/select.component.ts

しかし、私は同じエラーを受け取り続けます。

これを達成する方法はありますか？

Angular Material 拡張パネルのリストを含む Sidenav を実装しようとしています。ngFor ディレクティブを使用している場合、レイアウトは希望どおりにきれいに見えます。画像でわかるように、ビューを Expansion-Panel-content の幅の 100% に拡大します。 ngFor-directive を使用したレイアウト。
ng-For-directive でどのように見えるかの Stackblitz: https://stackblitz.com/edit/angular-ivy-fwav88?file=src/app/app.component.ts

リストには何千ものアイテムが含まれる可能性があるため、CDK 仮想スクロールを使用してパフォーマンスを向上させたいと考えています。

しかし、これを使用すると、リストの幅を 100% に設定できませんでした。代わりに、水平スクロール バーがあります。

仮想スクロールでの見え方。

仮想スクロールを使用したコードの Stackblitz: https://stackblitz.com/edit/angular-ivy-xr5bok? ​​file=src/app/sidenav/sidenav.component.html

私はフレックスボックスと私が知っている他のすべてのCSSトリックを使用しようとしましたが、成功しませんでした.

助けてくれて本当に感謝しています。

ありがとう！