Blazor - 选择元素的下拉问题

Question

我有输入选择组件，它正在获取站点列表，它可以很好地填充下拉列表，但是当我选择一个元素时，列表本身会发生变化。

我怎样才能防止这种情况（我做错了什么）？

问题说明：

1. Dropdown 加载非常好，第一个元素选择了“Site A”
2. 点击下拉菜单（尚未选择任何内容）会显示站点 A、站点 B、站点 C 和站点 D
3. 现在选择站点 B 会使我的下拉列表显示：站点 B、站点 B、站点 C 和站点 D

站点 A 去哪儿了？

选择站点 C 显示： 站点 C、站点 B、站点 C 和站点 D

所以看起来它绑定到列表中的第一个元素，我该如何阻止它，我只想从列表中读取它？

选择站点 C 时站点列表的控制台输出：

Site C
Site B
Site C
Site D

<EditForm Model=Sites>
<InputSelect ValueExpression=@(()=>SelectedSite.Site)
Value=@SelectedSite.Site
ValueChanged=@((string value) => OnSiteValueChanged(value))>
    @foreach (var site in Sites)
    {
    <option  value=@site.Site>@site.Site</option>
    }
</InputSelect>

我正在尝试将选择绑定到另一个名为 SelectedSite 的属性。 除列表内容外，一切正常。

其他信息：

private void OnSiteValueChanged(string value)
        {
            SelectedSite.Site = value;
            foreach(var item in Sites)
            {
                Console.WriteLine(item.Site);
            }
        }

Answer 1

这应该可以解决问题：

private void OnSiteValueChanged(string value)
{
    //this selects new site by value
    SelectedSite = Sites.FirstOrDefault(s => s.Site == value);
}

解释：

在您最初的 OnSiteValueChanged() 方法中，您没有选择新站点，而是将现有站点从“站点 A”更改为“站点 B”，分别更改为“站点 C”。

Answer 2

每当您使用循环来呈现 Blazor 内容（您的 @foreach ）时，您应该在呈现的元素上使用 @key 指令，以便 Blazor 可以跟踪它需要添加/删除或更新的元素。

@foreach (var site in Sites)
{
 <option @key=site.Site value=@site.Site>@site.Site</option>
}

在这种情况下，我会使用site.Site 作为@key，因为它似乎是一个唯一的字符串，但您可以只使用site 作为@key。