#javascript #sorting #blazor #render
#javascript #сортировка #blazor #визуализация
Вопрос:
Я не могу правильно удалить или отсортировать динамически созданный компонент в Blazor.
Я создаю свои объекты следующим образом в теле страницы:
private RenderFragment CreateComponentObject() => builder =>
{
foreach (var item in myObjects)
{
builder.OpenComponent(i, typeof(MyBlazorComponent));
builder.AddAttribute(1, "ComponentID", item.ID);
builder.AddAttribute(1, "ComponentName", item.Name);
builder.AddComponentReferenceCapture(i, inst => { ReferenceObjects.Add((MyBlazorComponent)inst); });
builder.CloseComponent();
}
i ;
};
Теперь мне нужно, чтобы оба могли
1. Sort the components by ID or Name
2. Eventually remove one or more components
Я попытался отсортировать элементы с помощью простого скрипта сортировки, но он не работает. В качестве альтернативы, я попытался «удалить» все компоненты через builder.Очистить и повторно ввести в функцию CreateComponentObject, упорядочив компоненты, которые будут созданы желаемым образом.
Но эта стратегия работает плохо, поскольку порядок меняется для одних параметров, а для других — нет.
Пример: если я очищу конструктор и перераспределю компоненты по имени, я увижу идентификатор компонента в правильном порядке, но имя не изменится
Before:
ID 19 Name Kiki
ID 20 Name Jiji
After:
ID 20 Name Kiki
ID 19 Name Jiji
У кого-нибудь есть идея, как решить мои две проблемы?
Ответ №1:
Нумерация должна следовать номерам строк, а не для циклов.
builder.OpenComponent(1, typeof(MyBlazorComponent));
builder.AddAttribute(2, "ComponentID", item.ID);
builder.AddAttribute(3, "ComponentName", item.Name);
builder.AddComponentReferenceCapture(4, inst => { ReferenceObjects.Add((MyBlazorComponent)inst); });
builder.SetKey(item); // makes the sequence nrs less relevant
builder.CloseComponent();
// i ;
Но вы, вероятно, захотите использовать SetKey для переопределения нумерации.
Комментарии:
1. В дополнение к этому я бы рекомендовал вам рассмотреть возможность использования цикла и / или дочернего содержимого, чтобы вы могли объявлять нужные вам компоненты, а не самостоятельно управлять деревом рендеринга. Если у вас много-много компонентов, которые могут потребоваться для рендеринга, рассмотрите возможность каскадирования их через дочерний компонент, который определяет, что отображать на основе вашей логики (серия if-блоков или swtich-ов). Это может быть проще поддерживать в долгосрочной перспективе
2. Большое вам обоим спасибо! Добавив SetKey, мой код работает, и я попытаюсь объявить свой компонент через ChildContent, как предлагает rdmptn.