如何在 Blazor 的可重用 Table 组件中显示数据

如何解决如何在 Blazor 的可重用 Table 组件中显示数据

我正在尝试在 Blazor 中创建一个可重用的 MasterTable 组件。

到目前为止，我已经将 MasterTable 定义为

@using AntDesign
@using MyNamespace.Blazor.viewmodels

@typeparam TItem

<Table TItem="TItem" DataSource="@Data">
    @{
        foreach (var col in Columns)
        {
            <Column Title="@col.Label" @bind-Field="@col.Key" />
        }
    }
</Table>

@code
{

    private List<TItem> _data;
    [Parameter]
    public List<TItem> Data
    {
        get => _data;
        set => _data = value ?? new List<TItem>();
    }

    [Parameter]
    public TableColumnviewmodel[] Columns { get; set; }
}

其中 TableColumnviewmodel 被简单地定义为

public class TableColumnviewmodel
{         
  public string Key { get; set; }
  public string Label { get; set; }
}

我想在 Daily Tasks 的页面中创建 MasterTable 的一个实例，但到目前为止我只能让它像这样显示：

我实现 MasterTable 的尝试如下：

@page "/Tasks/Daily";
@using MyNamespace.Blazor.Services;
@using MyNamespace.Blazor.viewmodels;
@using MyNamespace.Api.Client.Model;

@inject ITasksService _tasksService;

<h1>Daily Tasks</h1>

<MasterTable TItem="TaskStatus" Data="_tasks" Columns="cols">
</MasterTable>

@code {
    private List<TaskStatus> _tasks = new List<TaskStatus>();
    protected override async Task OnInitializedAsync()
    {
        _tasks = await _tasksService.GetTaskStatusAsync();
    }
    
    TableColumnviewmodel[] cols = 
    {
        new TableColumnviewmodel
        {
            Key = "id",Label = "ID"
        },new TableColumnviewmodel
        {
            Key = "description",new c
        {
            Key = "type",Label = "Type"
        }
    };
}

TaskStatus 定义为

public class TaskStatus
{
   
    public TaskStatus(int taskStatusId = default(int),string statusDescription = default(string))
    {
        this.TaskStatusId = taskStatusId;
        this.StatusDescription = statusDescription;
    }
   
    public int TaskStatusId { get; set; }  
    public string StatusDescription { get; set; }
}

我需要做什么才能让 MasterTable 模板显示 TaskStatus 对象列表而不是 TableColumnviewmodel 中的键？

要清楚 - 而不是仅仅使用组件而不包装它，问题是我想在 3rd 方组件的上下文中隔离 CSS，以便只有必要的 CSS 是已加载。

解决方法

您似乎从未使用过 Table 组件的 DataSource。有关工作示例，您可以查看 Creating a DataGrid component in Blazor。