索引超出范围的Blazor复选框 [英] Index out of range blazor checkbox

问题描述

我尝试在Blazor中创建用户管理。 当我单击复选框时，该复选框处于选中/取消选中状态。但当它显示指数超出范围时。我不知道哪里出了问题。就试着用开拓者WASB吧。请帮我检查一下这个。这只是一个基本组件，但不知何故我还不习惯它的用法。
我尝试在Blazor中创建用户管理。 当我单击复选框时，该复选框处于选中/取消选中状态。但当它显示指数超出范围时。我不知道哪里出了问题。就试着用开拓者WASB吧。请帮我检查一下这个。这只是一个基本组件，但不知何故我还不习惯它的用法。

  @page "/manageuserrole/{userId}"
    @inject HttpClient client

@inject IJSRuntime js
@inject NavigationManager uriHelper

<h3>User Roles</h3>


@if (manageUserRolesDto == null)
{
    <text>Loading...</text>
}
@*else if (manageUserRolesDto.Length == 0)
    {
        <text>No Records Found.</text>
    }*@
else
{
    <EditForm Model="@manageUserRolesDto" OnValidSubmit="@UpdateUserRoles">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Role</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                @for (int i = 0; i < manageUserRolesDto.UserRoles.Count(); i++)
                {
                    <tr>
                        <td>@manageUserRolesDto.UserRoles[i].RoleName</td>
                        <td>
                            <div class="form-check m-1">
                                <input type="checkbox" 
                                       @bind="@manageUserRolesDto.UserRoles[i].Selected" 
                                       />
                            </div>
                        </td>

                    </tr>
                }

            </tbody>
        </table>
        <button type="submit" class="btn btn-success">
            Submit
        </button>
    </EditForm>


}
@code {
    [Parameter]
    public string userId { get; set; }

    ManageUserRolesDto manageUserRolesDto { get; set; }
    protected override async Task OnInitializedAsync()
    {
        manageUserRolesDto = await client.GetFromJsonAsync<ManageUserRolesDto>("api/userroles/" + userId);
    }

    private void checkUserRole(int i)
    {
        manageUserRolesDto.UserRoles[i].Selected = !manageUserRolesDto.UserRoles[i].Selected;

    }



    async Task UpdateUserRoles()
    {
        await client.PutAsJsonAsync("api/userroles/" + userId, manageUserRolesDto);
        uriHelper.NavigateTo("user");

    }


    async Task ManagePermission(string roleId)
    {

    }
}

推荐答案

@for (int i = 0; i < manageUserRolesDto.UserRoles.Count(); i++)
{
    int copy = i; 
    <tr>
    <td>@manageUserRolesDto.UserRoles[i].RoleName</td>   <-- this 'i' is OK
    <td><div class="form-check m-1">
            <input type="checkbox" 
              @bind="@manageUserRolesDto.UserRoles[copy].Selected"  <-- i is not OK
            />
    </div></td>
    </tr>
}

@bind编译为捕获变量的lambda函数。

另一个选项是使用foreach() { }而不是for() { }

这篇关于索引超出范围的Blazor复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！