请求更改时 Blazor Virtualize 更新

Question

我有一个组件，可以显示数据库中最多 200000 名的运动员。\n它工作得很好，但是当我添加一个带有国家/地区列表的选择来过滤结果时，我可以看到结果计数已更新，但虚拟化组件在滚动之前不会更新？

\n\n

@page "/persons"\n@inject HttpClient Http\n\n\n<div class="container-fluid">\n    <div class="row">\n        <div class="col-12">\n            <h1>@($"{totalindividu:### ### ##0}") athletes linked</h1>\n        </div>\n    </div>\n    <div class="row">\n        <div class="col-4">\n            <select class="form-control" @onchange="ChangePays">\n                <option value="-1" selected>Pas de s\xc3\xa9lection sur le pays</option>\n                @if (pays != null)\n                {\n                    @foreach (var p in pays)\n                    {\n                    <option value="@p.aatpays_id">@p.aaipays_nom</option>\n                    }\n                }\n            </select>\n        </div>\n        <div class="col-4">&nbsp;</div>\n        <div class="col-4"><p>@selpays</p></div>\n    </div>\n    <div class="row">\n        <div class="col-12">\n            <table class="table">\n                <thead>\n                    <tr>\n                        <th>ID</th>\n                        <th>Code</th>\n                        <th>Nom long</th>\n                        <th>Pays</th>\n                        <th>Discipline</th>\n                        <th>Date de naissance</th>\n                    </tr>\n                </thead>\n                <tbody>\n                    <Virtualize Context="individu" ItemsProvider="@LoadIndividus">\n                        <ItemContent>\n                            <tr>\n                                <td style="width: 100px">@individu.aatindividu_id</td>\n                                <td style="width: 100px">@individu.aalindividu_code</td>\n                                <td>@individu.aaiindividu_nomLong</td>\n                                <td style="width: 200px">@individu.aaipays_nom</td>\n                                <td style="width: 200px">@individu.aaidiscipline_nom</td>\n                                <td style="width: 100px">@individu.aatindividu_dateNaissance</td>\n                            </tr>\n                        </ItemContent>\n                        <Placeholder>\n                            <tr>\n                                <td style="width: 100px">Loading...</td>\n                                <td style="width: 100px">Loading...</td>\n                                <td>Loading...</td>\n                                <td style="width: 200px">Loading...</td>\n                                <td style="width: 200px">Loading...</td>\n                                <td style="width: 100px">Loading...</td>\n                            </tr>\n                        </Placeholder>\n                    </Virtualize>\n                </tbody>\n            </table>\n        </div>\n    </div>\n</div>\n\n@code {\n    private int totalindividu = 0;\n    private string selpays = "-1";\n    private BdsPays[] pays = null;\n    private BdsIndividu[] individus = null;\n\n    protected override async Task OnInitializedAsync()\n    {\n        pays = await Http.GetFromJsonAsync<BdsPays[]>("api/BdsAa/pays/1");\n        //individus = await LoadIndividus(0, 50);\n    }\n\n    private async Task<BdsIndividu[]> LoadIndividus(int start, int count)\n    {\n        totalindividu = await Http.GetFromJsonAsync<int>($"api/BdsAa/individusinoutcount/1/33/{selpays}");\n        individus = await Http.GetFromJsonAsync<BdsIndividu[]>($"api/BdsAa/individusinout/1/33/{start}/{count}/{selpays}");\n        return individus;\n    }\n\n    private async ValueTask<ItemsProviderResult<BdsIndividu>> LoadIndividus(ItemsProviderRequest request)\n    {\n        individus = await LoadIndividus(request.StartIndex, request.Count);\n        StateHasChanged();\n        return new ItemsProviderResult<BdsIndividu>(individus, totalindividu);\n    }\n\n    private async Task ChangePays(ChangeEventArgs e)\n    {\n        selpays = e.Value.ToString();\n        individus = null;\n        StateHasChanged();\n    }\n}\n

\n

当我的过滤器发生变化时，有什么想法强制更新表吗？

\n

让

\n

Answer 1

您应该能够RefreshDataAsync()按如下方式进行调用。

来自添加此功能的GitHub问题

对于开发人员使用 ItemsProvider 的更一般情况，我们应该在 Virtualize 上添加一个新的公共异步任务 RefreshDataAsync 方法。如果开发人员有理由认为底层数据源输出可能已更改，例如当用户单击“刷新”按钮时，则可以调用此方法。这与用户滚动到一组新数据时发生的情况相同。

Answer 2

要对 Mike 的帖子进行一些扩展，您需要添加对 Virtualize 组件的引用，如下所示：

<Virtualize @ref="ArticleContainer" ItemsProvider="LoadArticles">
[...]
</Virtualize>

@code {
    private Virtualize<Article> ArticleContainer { get; set; }
}

有了引用，您就可以触发刷新。请注意，这不会导致组件再次渲染（如果它是异步的！），您StateHasChanged()也必须调用。

private async Task ReloadArticles()
{
    await ArticleContainer.RefreshDataAsync();
    StateHasChanged();
}