时间戳

首页 > 解决方案 > 如何在 Blazor 中删除和排序动态创建的 RenderFragments

javascript - 如何在 Blazor 中删除和排序动态创建的 RenderFragments

问题描述

我无法在 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.Clean “删除”所有组件并重新输入 CreateComponentObject 函数，以所需的方式订购要创建的组件。但是这种策略效果不佳，因为某些参数的顺序会发生变化，而其他参数则不会。

示例：如果我清除构建器并按名称重新分配组件，我将看到组件的 ID 遵循正确的顺序，但名称不会改变

Before:
ID 19 Name Kiki
ID 20  Name Jiji

After:
ID 20 Name Kiki
ID 19 Name Jiji

有谁知道如何面对我的两个问题？

标签： javascriptsortingblazorrender

解决方案

编号应该遵循行号，而不是循环。

 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 来覆盖编号。

推荐阅读