Blazor

Question

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

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

问题说明：

下拉列表加载得非常好，第一个元素 select 为“站点 A”
单击下拉菜单（尚未 select 显示任何内容）显示站点 A、站点 B、站点 C 和站点 D
Select访问站点 B 现在使我的下拉列表显示：站点 B、站点 B、站点 C 和站点 D

Site A 去哪儿了？

Selecting 站点 C 显示：站点 C、站点 B、站点 C 和站点 D

它看起来像是绑定到列表中的第一个元素，我该如何停止它，我只希望它从列表中读取？

站点 C Selected:

时站点列表的控制台输出

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>

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

附加信息：

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

Answer 1

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

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

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

Answer 2

这应该可以解决问题：

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

解释：

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

Blazor - 下拉问题选择元素

Blazor - Dropdown issues selecting elements

binding

dropdown