删除动态创建的组件总是从列表中删除最后一项答案

【问题标题】：Removing dynamically created component always removes last item from list删除动态创建的组件总是从列表中删除最后一项
【发布时间】：2020-07-07 01:43:45
【问题描述】：

我正在使用 Blazor WebAssembly 实现一个简单的 pin-up board。使用 X 按钮移除任何卡片时，它始终是列表中被移除的最后一个元素。

@foreach (var item in _cards)
{
    <div class="card-title">
        <input type="text" id="@item.TitleElementId" value="@item.Title" />
        <button class="btn-remove" @onclick="() => RemoveCard(item)">X</button>
    </div>
}
<button class="btn-add" @onclick="AddNewCard">+</button>

@code {
    private List<Card> _cards = new List<Card>();

    private void AddNewCard()
    {
        _cards.Add(new Card());
    }

    private void RemoveCard(Card card)
    {
        _cards.Remove(card);
        // Also tried _cards.RemoveAll(i => i.TitleElementId == card.TitleElementId);
    }
}

【问题讨论】：

我也遇到了这个问题。似乎每当我尝试从列表中删除某些内容时。列表已正确更新，但绑定从末尾删除。

标签： c# .net blazor

【解决方案1】：

我注意到只有在我修改了卡片中某些输入的值后才会发生这种情况。

原来是值绑定的问题。我需要使用 Blazor 的 @bind-"" 而不是默认的 html value=""。不幸的是，我不知道为什么会发生这种情况。

所以不是

<input type="text" value="item.Title"/>

我改成

<input type="text" @bind="item.Title"/>

一切都按预期进行。

【讨论】：

【解决方案2】：

在 for 循环中，使用记录唯一标识符添加 @key="item.TitleElementId" 属性，以强制 Blazor 将 html 控件映射到 C# 项目 ID。

<input @key="item.TitleElementId" type="text" id="@item.TitleElementId" value="@item.Title" />
<button @key="item.TitleElementId" class="btn-remove" @onclick="() => RemoveCard(item)">X</button>

【讨论】：