时间戳

首页 > 解决方案 > 为什么@for 循环在 Razor 和 Blazor 中不起作用？

c# - 为什么@for 循环在 Razor 和 Blazor 中不起作用？

问题描述

此代码有效：

@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）：

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

尝试捕获后：

米 = 3

谢谢

标签： c#blazor

解决方案

看看下面的代码（你的代码在我的 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 -i停止 for 循环的最后一个版本。- 并且 m in style1[m]是 3 指向不存在的第 4 个成员style1。Index was out of range是完全正确的，但尽可能提供信息。

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

推荐阅读