为什么@for 循环在 Razor 和 Blazor 中不起作用？ [复制]答案

【问题标题】：Why does @for loop does not work in Razor and Blazor? [duplicate]为什么@for 循环在 Razor 和 Blazor 中不起作用？ [复制]
【发布时间】：2021-05-16 20:33:33
【问题描述】：

此代码有效：

@page "/"
<button @onclick="@(()=>fun(0))" style="color: @style1[0]">
    Click me
</button>
<button @onclick="@(()=>fun(1))" style="color: @style1[1]">
    Click me
</button>
<button @onclick="@(()=>fun(2))" style="color: @style1[2]">
    Click me
</button>

@code{
    List<string> style1 = new List<string> { "black" , "black", "black" };
    void fun(int m)
    {
       try
       {
           if (style1[m] == "black") style1[m] = "red";
               else style1[m] = "black";
       }
       catch
       {
            Console.WriteLine("m = {0}", m);
       }
    }
}

但是这个没有：

@page "/"
@for (int i = 0; i < 3; i++)
{
    <button @onclick="@(()=>fun(i))" style="color: @style1[i]">
        Click me
    </button>
}
@code{
//same as above
}

这是控制台中的错误（没有 try-catch）：

未处理的异常呈现组件：索引超出范围。必须是非负数且小于集合的大小。

try-catch 之后：

m = 3

谢谢

【问题讨论】：

尝试在for循环中添加临时变量并在fun()中使用它：var tmp = i;和()=>fun(tmp)
非常感谢。有效。您能否描述一下这些语句之间的区别以及为什么它不起作用？
这就是closures 在 C# 中的工作方式。

标签： c# blazor

【解决方案1】：

看看下面的代码（你的代码在我的 index.razor 中的一个更简单的版本）

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

@for (int i = 0; i < 3; i++)
{
    <button class="btn btn-primary mr-2" @onclick="(() => ButtonClick(i))">@($"Button {i}") </button>
}
<h4>Value = @value</h4>

@code {

    int value = -1;

    void ButtonClick(int x)
        => value = x;
}

您的期望是当您单击按钮 1 时 Value 会显示 1。但并非如此，它始终显示 3，即 i 的最终值。按钮点击事件提交i的值，当按钮被点击时，循环早就完成了。

在您的代码中，i 是 3 - 停止 for 循环的 i 的最后一个版本。 - style1[m] 中的 m 是 3，指向不存在的 style1 的第四个成员。 Index was out of range 非常正确，但也提供了尽可能多的信息。

有时你只见树木不见森林！！

【讨论】：