Blazor How to use a bind to an array of booleans

Question

I have an array of objects in which there is an IsChecked property. With an array I fill the table, where for the IsChecked properties I do @bind to input.

When I try to switch the value, an error flies. If I immediately change the value IsChecked = true, then the check mark is ticked.

for(var i = 0; i < firms.Length; i++)
{
    <tr>
        <td>@firms[i].ShortTitle</td>
        <th scope="row">
            <div class="custom-control custom-checkbox">
                <input type="checkbox" ... @bind="@firms[i].IsChecked" />
             ..
            </div>
        </th>
    </tr>
}

Error:

Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer: Warning: Unhandled exception rendering component: Index was outside the bounds of the array.

System.IndexOutOfRangeException: Index was outside the bounds of the array. at ....<>c__DisplayClass0_1.b__6(Boolean __value) at Microsoft.AspNetCore.Components.EventCallbackFactoryBinderExtensions.<>c__DisplayClass22_0`1.b__0(ChangeEventArgs e) --- End of stack trace from previous location where exception was thrown --- at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task) at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle) Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost: Error: Unhandled exception in circuit 'LzL8iNZr7FmkJFJRS3QTW3QzJwP9R-p3CaclRHcE1_A.'.

System.IndexOutOfRangeException: Index was outside the bounds of the array. at ...<>c__DisplayClass0_1.b__6(Boolean __value) at Microsoft.AspNetCore.Components.EventCallbackFactoryBinderExtensions.<>c__DisplayClass22_0`1.b__0(ChangeEventArgs e) --- End of stack trace from previous location where exception was thrown --- at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task) at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

what am I doing wrong?

My money here is on the loop variable being caught in a closure, so once it tries to actually bind, `i == firms.Length`. What happens if you just print `i` to the page on each iteration? Is it `firms.Length`'s value `firms.Length` times? — Jonathon Chase, Sep 12 '19 at 16:42

enet · Accepted Answer · 2019-09-13T09:08:56.870

8

Somewhere in your code (you do not display all your code ) the 'delegate' EventCallback is executed, but the 'Index was outside the bounds of the array"; This occurs because the code that accesses the Index value always gets the last Index + 1

To solve this, use a local variable to which you should assigned the value of i, something like this"

var local = i;

See my answer here...

Hope this helps...

edited Sep 13 '19 at 09:08

answered Sep 12 '19 at 16:59

enet

41,195
5
76
113

It really helped, but I already changed the for loop to foreach – pasha goroshko Sep 13 '19 at 08:27
Yes, this was fixed for foreach() loops, not for for(). The explanation is that the generated code contains a lambda, google "lambda closure". – H H Sep 13 '19 at 10:39

Blazor How to use a bind to an array of booleans

1 Answers1