Blazor：如何自动对 MudBlazor 表中的行进行编号？

Question

我有一个 ASP.NET Blazor 服务器项目，它使用 MudBlazor 库来创建 HTML 表格。我的问题是编号。在下面的示例代码中，行的编号是从类属性中检索的。但是，在我的班级中，我没有 number 属性，并且在我打算在表格中显示的所有班级中都有数字属性并不好。

由于表接受项目列表，有没有办法获取正在呈现的项目的索引并使用它而不是 @context.Number 来显示 MudBlazor 表中的行号？

<MudTable Items="@Elements.Take(4)" Hover="true" Breakpoint="Breakpoint.Sm" Loading="@_loading" LoadingProgressColor="Color.Info">
    <HeaderContent>
        <MudTh>Nr</MudTh>
        <MudTh>Sign</MudTh>
        <MudTh>Name</MudTh>
        <MudTh>Position</MudTh>
        <MudTh>Molar mass</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Nr">@context.Number</MudTd>
        <MudTd DataLabel="Sign">@context.Sign</MudTd>
        <MudTd DataLabel="Name">@context.Name</MudTd>
        <MudTd DataLabel="Position" HideSmall="_hidePosition">@context.Position</MudTd>
        <MudTd DataLabel="Molar mass">@context.Molar</MudTd>
    </RowTemplate>
</MudTable>

<MudSwitch @bind-Checked="_hidePosition">Hide <b>position</b> when Breakpoint=Xs</MudSwitch>
<MudSwitch @bind-Checked="_loading">Show Loading</MudSwitch>

这个示例代码可以在MudBlazor Table找到。

Answer 1

嗯，有点粗略但最简单的解决方案是将当前无数字对象映射到包含所需数字的模型。
创建以下内容：

public class Model<T>
{
    public int Number {get; set;}
    public T Value {get; set;}
}

然后通过您选择的某些属性对您的原始集合进行排序并迭代，每次创建新的 Model 对象，其中包含原始对象的连续编号和值。
使用这个新模型作为表格的显示数据源，一切正常。

<MudTd DataLabel="Nr">@context.Number</MudTd>
<MudTd DataLabel="Sign">@context.Sign</MudTd>

会变成

<MudTd DataLabel="Nr">@context.Number</MudTd>
<MudTd DataLabel="Sign">@context.Value.Sign</MudTd>
// etc...

再一次，它在眼睛上有点粗糙，但可以解决问题。