MudBlazor - 通用 MudTable答案

【问题标题】：MudBlazor - Generic MudTableMudBlazor - 通用 MudTable
【发布时间】：2022-01-14 12:36:53
【问题描述】：

我正在尝试创建自己的继承自 MudTable 的自定义组件。在我的自定义组件中，我创建了一个具有 TItem 类型的 IEnumerable 属性，然后我从父类发送一个 DataSource，我还通过参数定义了 TItem 类型。我遇到的问题是 MudTable 使用 @context 从 DataSource 获取值，当您为 DataSource 提供预定义类型时，这些值是已知的。你可以在这里看到MudTable。

但是当 DataSource 是泛型类型时，我怎么能做到这一点，@context 不知道从哪个属性中获取值。

包含自定义组件的父组件：

<CETable DataSource="Persons" ItemType="Person"></CETable>

public List<Person> Persons { get; set; }

protected override void OnInitialized()
{
    Persons = new List<Person>();
    Persons.Add(new Person { AgeOfPerson = "25", Name = "Mike" });
    Persons.Add(new Person { AgeOfPerson = "35", Name = "John" });
    Persons.Add(new Person { AgeOfPerson = "45", Name = "Michel" });

}

public class Person
{
    public string Name { get; set; }
    public string AgeOfPerson { get; set; }

}

自定义组件（CETable）：

@typeparam ItemType
@inherits MudTable<ItemType>
<MudTable Items="DataSource">
<HeaderContent>
 @*I will send later those columns as a parameter*@

    <MudTh>Name</MudTh>
    <MudTh>AgeOfPerson</MudTh>

</HeaderContent>
<RowTemplate>
    <MudTd DataLabel="Name">@context.</MudTd> // How To define the context here ?
    <MudTd DataLabel="AgeOfPerson">@context.</MudTd> // How To define the context here ?
</RowTemplate>
</MudTable>
@code{
[Parameter]
public IEnumerable<ItemType> DataSource { get; set; }
}

感谢您的帮助。

【问题讨论】：

也许我没有正确理解您，但您似乎在说您想接受任何类型的项目，但您想在编译时决定您从提供的项目中使用哪些属性。 . 它不能工作；开发人员提供这些值的原因是因为他们知道自己想要使用什么......？
无论如何我可以从父组件发送属性并通过反射或其他方式将它们绑定到子组件中吗？

标签： c# asp.net-core generics blazor mudblazor

【解决方案1】：

我找到了解决方案。如果有人需要，我会在这里发布。基本上，我正在创建一个渲染片段，它从父组件获取内容并在子组件中设置值。

包含自定义组件的父组件：

<CETable DataSource="Persons" ItemType="Person">
<CEHeaderTemplate>
    <CETh>Name</CETh>
    <CETh>AgeOfPerson</CETh>
</CEHeaderTemplate>
<CERowTemplate>
    <CETd DataLabel="Name">@context.Name</CETd>
    <CETd DataLabel="AgeOfPerson">@context.AgeOfPerson</CETd>
</CERowTemplate></CETable>

自定义组件（CETable）：

@typeparam ItemType
@inherits MudTable<ItemType>
<MudTable Items="DataSource">
<HeaderContent>
    @CEHeaderTemplate
</HeaderContent>
<RowTemplate>
    @CERowTemplate(@context)
</RowTemplate></MudTable>

@code{
[Parameter]
public IEnumerable<ItemType> DataSource { get; set; }

[Parameter]
public RenderFragment<ItemType> CERowTemplate { get; set; }

[Parameter]
public RenderFragment CEHeaderTemplate { get; set; }
}

【讨论】：