0

我有一个 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 表中找到。

4

2 回答 2

0

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

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

同样，它对眼睛有点粗糙，但会奏效。

于 2021-11-17T15:25:37.293 回答
0

使用 Linq 的 TakeWhile，您可以计算元素，直到找到与您当前所在行的元素匹配的元素：

<MudTable Items="@MyElements">
    <HeaderContent>
        <MudTh>Row</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd>@GetRowNumber(context)</MudTd>
    </RowTemplate>
</MudTable>
@code{
    public IEnumerable<object> MyElements => Elements.Take(4);
    public int? GetRowNumber(object element) =>
        MyElements?.TakeWhile(x => x != element).Count();
}
于 2022-02-23T13:18:22.517 回答