Blazor: удаление динамически созданного компонента всегда удаляет последний элемент из списка

Я реализую простую доску пин-ап с Blazor WebAssembly. При удалении любой карты кнопкой 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);
    }
}

Всего 2 ответа


Я заметил, что это происходит только после того, как я изменил значение некоторых входов внутри карточек.

Оказывается, проблема со значением привязки. Мне нужно использовать @bind-"" bind- "" Blazor вместо html value="" по умолчанию value="" . К сожалению, я не знаю точно, почему это происходит.

Так что вместо

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

Я поменял на

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

и все работает как положено.


Следующий код работает отлично. Примечание: я поменял карточки на авторов и внес некоторые изменения. В противном случае мой фрагмент кода будет похож на ваш:

Index.razor

@page "/"

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

@code {
//private List<Card> _cards = new List<Card>();
int ID = 10;

List<Author> authors = Enumerable.Range(1, 10).Select(i => new Author
{ ID = i, Name = $"Author {i.ToString()}" }).ToList();

private void AddNewCard()
{
    authors.Add(new Author { ID = ID++, Name = $"Author {ID.ToString()}" });
}

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

public class Author
{
    public int ID { get; set; }
    public string Name { get; set; }
}
}

Надеюсь это поможет...


Есть идеи?

10000