DrXSsive's questions

我正在尝试使用 FluentDataGrid 显示数据，但出现了非常奇怪的行为。问题：

1. 网格的总项目数未正确更新。这就是分页按钮不起作用的原因。
2. 我以某种方式设法设置了总项目数，但是当我更改页面时，事件总是获得 0 作为页码。

这是我的代码。我使用@rendermode = InteractiveAssembly。

@rendermode InteractiveWebAssembly

@inject HttpClientService httpClientService

<FluentDataGrid Items="RolesData?.Data?.AsQueryable()"
                TGridItem="GetRoles.Response"
                Pagination="paginationState"
                ShowHover="true"
                MultiLine="true"
                Loading="@gridLoader">
    <PropertyColumn Property="@(c => c.Name)" Sortable="false" />
    <TemplateColumn Title="Permissions">
        <p>@context.PermissionCount permissions assigned</p>
    </TemplateColumn>
    <TemplateColumn Title="Assigned To">
        <p>@context.AssignedTo uers</p>
    </TemplateColumn>
    <TemplateColumn Title="Actions">
        @if (context.IsPrimary == false)
        {
            <FluentButton aria-label="Edit item" IconEnd="@(new Icons.Regular.Size16.Edit())" OnClick="() => OnEditClick(context.Id)" />
            <FluentButton aria-label="Delete item" IconEnd="@(new Icons.Regular.Size16.Delete())" OnClick="() => OnDeleteClick(context.Id)" />
        }
    </TemplateColumn>
</FluentDataGrid>
<FluentPaginator State="@paginationState" CurrentPageIndexChanged="OnCurrentPageIndexChanged" />

这是我的组件。我最初在 OnAfterRenderAsync 上获取数据

private GetRoles.Request request = new GetRoles.Request();
private Pagination.Response<IEnumerable<GetRoles.Response>>? RolesData;

PaginationState paginationState = new PaginationState { ItemsPerPage = 10 };
bool gridLoader;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await GetRoles();
    }
}

private async Task GetRoles()
{
    gridLoader = true;
    StateHasChanged();

    request.Page = paginationState.CurrentPageIndex;
    request.PageSize = paginationState.ItemsPerPage;

    var roleDataResponse = await httpClientService.GetAsync<Pagination.Response<IEnumerable<GetRoles.Response>>>("/api/roles", request);
    if (roleDataResponse != null)
    {
        RolesData = roleDataResponse;

        await paginationState.SetTotalItemCountAsync(roleDataResponse.TotalRecords);
    }

    gridLoader = false;
    StateHasChanged();

    Console.WriteLine($"CurrentPageIndex: {paginationState.CurrentPageIndex}");
    Console.WriteLine($"LastPageIndex: {paginationState.LastPageIndex}");
    Console.WriteLine($"TotalItemCount: {paginationState.TotalItemCount}");
}

处理分页按钮点击的事件是

async void OnCurrentPageIndexChanged(int index)
{
    await paginationState.SetCurrentPageIndexAsync(index);
    await GetRoles();
}

这是 API 返回的数据

{
    "totalRecords": 11,
    "data": [
        {
            "id": "Dy9dkGzW",
            "name": "Test 9",
            "permissionCount": 2,
            "assignedTo": 0,
            "isPrimary": false
        },
        {
            "id": "eV9ablPg",
            "name": "Test 8",
            "permissionCount": 2,
            "assignedTo": 0,
            "isPrimary": false
        },
        {
            "id": "X892olBV",
            "name": "Test 7",
            "permissionCount": 10,
            "assignedTo": 0,
            "isPrimary": false
        },
        {
            "id": "8e7V896p",
            "name": "Test 6",
            "permissionCount": 1,
            "assignedTo": 0,
            "isPrimary": false
        },
        {
            "id": "1VGx2l5Q",
            "name": "Test 5",
            "permissionCount": 4,
            "assignedTo": 0,
            "isPrimary": false
        },
        {
            "id": "5Y7Qq7Bk",
            "name": "Test 4",
            "permissionCount": 9,
            "assignedTo": 0,
            "isPrimary": false
        },
        {
            "id": "O8l1wGqx",
            "name": "Test 3",
            "permissionCount": 2,
            "assignedTo": 0,
            "isPrimary": false
        },
        {
            "id": "Y8Gb39Bq",
            "name": "Test 2",
            "permissionCount": 3,
            "assignedTo": 0,
            "isPrimary": false
        },
        {
            "id": "QY7BV7OV",
            "name": "Test 1",
            "permissionCount": 2,
            "assignedTo": 0,
            "isPrimary": false
        },
        {
            "id": "ZYG8o71v",
            "name": "Finance",
            "permissionCount": 8,
            "assignedTo": 0,
            "isPrimary": false
        }
    ]
}

如您所见，这里的“totalRecords”为 11。分页应该显示总记录数为 11，并且应该有 2 页，但它向我显示了这个

如果我将“await paginationState.SetTotalItemCountAsync(roleDataResponse.TotalRecords);”移到方法的末尾，它会正确设置总项目数，并且分页按钮不会被禁用，但是当我单击下一个按钮时，事件处理程序在“索引”中获取 0。

我是不是漏掉了什么，或者做错了什么？任何帮助都将不胜感激。

先感谢您。