Как удалить и отсортировать динамически созданные фрагменты визуализации в Blazor

#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.