問題タブ [virtualscroll]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
angular - 「仮想スクローラー」の既知のプロパティではないため、「アイテム」にバインドできません
仮想スクロールを ionic 4 + Angular プロジェクトに実装する際に問題が発生しています。
以前は、仮想スクロールの ionic の実装 (ion-virtual-scroll) を使用していましたが、最初はうまく機能していましたが、アプリに必要な ionic のグリッド ビューをサポートしていないという間違いなく大きな警告に遭遇しました。(Ionic は、ここの「機能リクエスト」の下のリポジトリでこれを認めています: https://github.com/ionic-team/ionic/issues/16632 )
その間、複数列のサポートを提供するngx-virtual-scroller ( https://github.com/rintoj/ngx-virtual-scroller ) を使用することにしました。
ただし、プロジェクト内での使用に問題があります。
npm (npm install ngx-virtual-scroller --save) を介してインストールし、app.module 内に VirtualScrollerMoudle をインポートしました
app.module.ts
コンポーネントのビュー内の要素を virtual-scroller タグで囲みました
商品カードビュー.component.html
しかし、私はこのエラーを受け取っています
コンソールのエラー
core.js:9110 エラー エラー: キャッチされていません (約束されています): エラー: テンプレート解析エラー: 「仮想スクロール」の既知のプロパティではないため、「アイテム」にバインドできません。1. 「virtual-scroller」が Angular コンポーネントで、「items」入力がある場合は、それがこのモジュールの一部であることを確認します。2. 「virtual-scroller」が Web コンポーネントの場合、このメッセージを抑制するために、このコンポーネントの「@NgModule.schemas」に「CUSTOM_ELEMENTS_SCHEMA」を追加します。3. 任意のプロパティを許可するには、このコンポーネントの「@NgModule.schemas」に「NO_ERRORS_SCHEMA」を追加します。
解決策を探した後、Ionic 3 ( https://github.com/rintoj/ngx-virtual-scroller/issues/85 )で同様の問題に直面した他の誰かに出くわし、彼らの解決策は VirtualScrollMoudle をグローバルアプリモジュールの代わりに使用されていた場所の子モジュールであり、コンポーネントの遅延読み込みの使用に関係している可能性があることを示しています。
残念ながら、私はそれを試みましたが無駄でした。VirtualScrollMoudle を app.module.ts のみにインポートしようとしました。これは、virtual-scoller のみと両方を同時に使用しているコンポーネントの親ページ モジュールですが、同じ問題に遭遇しました。
home.module.ts
また、インポートステートメントが一番下にあることを確認しました。これは、かなり多くの人々を捕まえることができたのを見たからです (過去の私を含む)。
解決策はありますか、それとも明らかな何かが欠けていますか?
バージョン:
イオン 4 (5.4.4)
角度: 8.1.3
angular - スクロールがロードされたときのスクロール内のAngularマテリアル仮想スクロールのデフォルトオフセット
角度のある素材の仮想スクロールを使用してレンダリングされたテーブルがあります。
データを取得して仮想スクロールに入力し、scrollToIndex を 100 に設定すると、100 行目が画面に表示されます。
ここでの問題は、最初にスクロールが読み込まれるときに最初の行が読み込まれ、次に 100 行目にジャンプするというジャンプがあることです。100 行目にデフォルト設定する方法はありますか。ジャンプせずに直接現れるように。
問題へのより多くの洞察、
これは双方向スクロールです。スクロールバーが上に達すると API を呼び出し、新しい値を取得して配列の上に追加し、下に達するとデータを下に追加します。
データが下部に追加されるとロジックはうまく機能しますが、データが上部に追加されるたびにスクロールバーがジャンプします。
または https://stackblitz.com/edit/angular-4cwieu?file=src%2Fapp%2Fapp.component.ts
そのsettimeoutなしで特定のインデックスにスクロールすることは可能ですか?