Пример. Использование @key для управления сохранением элементов и компонентов
Позволяет гарантировать сохранение состояния пользовательского интерфейса при изменении коллекции в поддереве.Исходный код
-------------------------- Key\People.razor --- компонент предок @page "/people" @using System.Timers @implements IDisposable <p> <h4 class="p-4"> Пример. <a target="_blank" href="https://docs.microsoft.com/ru-ru/aspnet/core/blazor/components/?view=aspnetcore-5.0#use-key-to-control-the-preservation-of-elements-and-components">Использование @key для управления сохранением элементов и компонентов</a> </h4> </p> <ol> @foreach (var person in people) { <li> <Details @key="person" Data="@person.Data" /> </li> } </ol> @code { private Timer timer = new Timer(1000); public List<Person> people = new List<Person>() { { new Person { Data = "Person 1" } }, { new Person { Data = "Person 2" } }, { new Person { Data = "Person 3" } } }; protected override void OnInitialized() { timer.Elapsed += (sender, eventArgs) => OnTimerCallback(); timer.Start(); } private void OnTimerCallback() { _ = InvokeAsync(() => { people.Insert(1, new Person { Data = $"INSERTED {DateTime.Now.ToString("hh:mm:ss tt")}" }); StateHasChanged(); }); } public void Dispose() => timer.Dispose(); public class Person { public string Data { get; set; } } } -------------------------- Key\People.razor --- наследник <input value="@Data" /> @code { [Parameter] public string Data { get; set; } }