C# Blazor选择绑定到列表中的值

我能够将作为list SelectedDiagnosidList变量的第一个元素的int类型绑定到html select的选定元素：

<div>
    <label>Diagnosis:</label>
    <div>
        <select @bind="@userInfo.SelectedDiagnosisIdList[0]">
            @foreach (var item in diagnoses)
            {
                <option value="@item.Id">@item.Name</option>
            }
        </select>
        <p>@userInfo.SelectedDiagnosisIdList[0]"</p>
    </div>
</div>

@code
{
    List<int> SelectedDiagnosisIdList = new List<int>() { 0 };
    List<Diagnosis> diagnoses; //  populated from db in OnInitializedAsync

}

这很好地工作，当我在UI上更改所选值时，段落的值也会更改

现在，我想添加更多诊断，因此我尝试维护更多诊断，并将更多元素添加到SelectedDiagnosticsID列表中：

<div>
    <label>Diagnosis:</label>
    <div>
        @for(int i = 0; i < userInfo.SelectedDiagnosisIdList.Count; i++)
            <select @bind="@userInfo.SelectedDiagnosisIdList[i]">
                @foreach (var item in diagnoses)
                {
                    <option value="@item.Id">@item.Name</option>
                }
            </select>
            <p>@userInfo.SelectedDiagnosisIdList[i]</p>
        }
    </div>
</div>

@code
{
    List<int> SelectedDiagnosisIdList = new List<int>() { 0 };
    List<Diagnosis> diagnoses; //  populated from db in OnInitializedAsync

}

这会破坏程序，当我选择一个项目和控制台时，UI上不会发生任何事情：

blazor.webassembly.js:1 WASM: Unhandled exception rendering component:
blazor.webassembly.js:1 WASM: System.ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection.
WASM: Parameter name: index
blazor.webassembly.js:1 WASM:   at (wrapper managed-to-native) System.Reflection.RuntimeMethodInfo.InternalInvoke(System.Reflection.RuntimeMethodInfo,object,object[],System.Exception&)
blazor.webassembly.js:1 WASM:   at System.Reflection.RuntimeMethodInfo.Invoke (System.Object obj, System.Reflection.BindingFlags invokeAttr, System.Reflection.Binder binder, System.Object[] parameters, System.Globalization.CultureInfo culture) <0x20c1360 + 0x000ce> in <71c4fd446b1842ba93fd332e5f4f9c06>:0 
blazor.webassembly.js:1 WASM: --- End of stack trace from previous location where exception was thrown ---
blazor.webassembly.js:1 WASM:   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion (System.Threading.Tasks.Task task) <0x269de40 + 0x000e6> in <cbf249d7f04d4fa18d15bfae8ef7f389>:0 
WASM:   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask (System.Threading.Tasks.Task taskToHandle) <0x269e988 + 0x000c2> in <cbf249d7f04d4fa18d15bfae8ef7f389>:0 

---

我不明白是什么问题，我怎样才能让它工作。。。请帮助

我想您的问题与for循环有关。您应该在循环中定义一个局部变量，如下所示：

    <div>
    @for(int i = 0; i < userInfo.SelectedDiagnosisIdList.Count; i++)
      {
        int local = i;
        <select id=$"dropdown{local+1}" 
               @bind="@userInfo.SelectedDiagnosisIdList[local]">
            @foreach (var item in diagnoses)
            {
                <option value="@item.Id">@item.Name</option>
            }
        </select>
        <p>@userInfo.SelectedDiagnosisIdList[local]</p>
    }
    </div>

---

希望这有帮助…

我想您的问题与for循环有关。您应该在循环中定义一个局部变量，如下所示：

    <div>
    @for(int i = 0; i < userInfo.SelectedDiagnosisIdList.Count; i++)
      {
        int local = i;
        <select id=$"dropdown{local+1}" 
               @bind="@userInfo.SelectedDiagnosisIdList[local]">
            @foreach (var item in diagnoses)
            {
                <option value="@item.Id">@item.Name</option>
            }
        </select>
        <p>@userInfo.SelectedDiagnosisIdList[local]</p>
    }
    </div>

---

希望这有助于…

令人惊讶的是，它做到了：你能解释它为什么工作吗？当你在没有局部变量的情况下使用for循环时，运行时会访问包含循环末尾值的i变量。但是，当您使用局部变量时，在循环的每次迭代中都会创建一个新变量来存储新值，因此当运行时访问变量时，每个变量都包含不同的值。您可以在此处了解有关此问题的更多信息：这主要是因为渲染是以异步方式完成的，因此for循环在lambda内部执行，局部变量将变量引入lambda。还有一件事你需要让代码正常工作。实际select元素上的HTML Id属性，例如：Id=dropdown1，Id=dropdown2等等，这样封闭的表单就知道在进行选择时哪个下拉列表是哪个下拉列表。确切地说，我必须使用HTML Id来实现这一点。令人惊讶的是，它做到了：你能解释它为什么工作吗？当你在没有局部变量的情况下使用for循环时，运行时访问i变量，该变量包含循环末尾的值。但是，当您使用局部变量时，在循环的每次迭代中都会创建一个新变量来存储新值，因此当运行时访问变量时，每个变量都包含不同的值。您可以在此处了解有关此问题的更多信息：这主要是因为渲染是以异步方式完成的，因此for循环在lambda内部执行，局部变量将变量引入lambda。还有一件事你需要让代码正常工作。实际select元素上的HTML Id属性，例如：Id=dropdown1、Id=dropdown2等等，这样封闭的表单就知道在进行选择时哪个下拉列表是哪个下拉列表。