bug(cdk) Replacing datasource does not refresh/display items in cdk-virtual-scrollport
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 91
説明
**Overview**
The first time you assign a datasource for iteration within the cdk-virtual-scrollport, all works as expected, as per the documentation example of displaying the first page of items. See "Virtual scroll with a custom data source" on https://material.angular.io/cdk/scrolling/examples
The bug however is if you subsequently try to assign a new instance of a datasource object to the same scroller. You will find that the scrollport will not request/display the first page of items from that new datasource **until the user scrolls the visible area**.
**Motivation/Use Case**
In the real-world our virtual data can require some sort of user driven filtering, like a search screen. Which will require a complete replacement of all the underlying/cached data in the scroller with fresh results. This is ideally achieved by replacing the datasource when the user triggers the search.
**Expected Behavior**
Scroller should reset itself automatically when given a new datasource and request the first page of rows in exactly the same way it does when it was assigned the first datasource.
**Actual Behavior**
CollectionViewer does not fire an event to the subscription in connect() until it has a range that differs.
**Minimal repro:**
See https://stackblitz.com/edit/angular-fs9xei-rgkahy?file=src%2Fapp%2Fcdk-virtual-scroll-data-source-example.ts
Run the sample, initial list items will appear. Click on the "Switch datasource button", and you will see the items in the list stuck with saying "loading..." indefinitely. You have to scroll before the datasource actually gets asked for data to be able to be displayed.
**Environment**
Angular: 11
CDK/Material: 11
Browser(s): n/a
Operating System (e.g. Windows, macOS, Ubuntu): n/a
コントリビューションガイド
調査の方向性
まず、リンクされた StackBlitz の再現手順を実行し、CDK virtual scroll data-source の例を確認します。cdk-virtual-scrollport が datasource を置き換える仕組みと、CollectionViewer のイベントが connect() のサブスクリプションに到達する仕組みを追跡します。完了条件は、datasources を切り替えると、スクロールしなくても最初のページがリクエストされて表示されることです。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, typescript
- 領域
- frontend
- issue の種類
- バグ
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 35/100