MudBlazor语言 - Generic MudTable

Question

我正在尝试创建自己的自定义组件，该组件继承自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; }
}

谢谢你的帮助。

Answer 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; }
}