asp.net-core - 如何在 Blazor 的可重用表组件中显示数据
问题描述
我正在尝试在 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; }
}
我想在日常任务的页面中创建 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",
Label = "ID"
},
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 中的键?
需要明确的是 - 而不是只使用组件而不包装它,问题是我想在第 3 方组件的上下文中隔离 CSS,以便只加载必要的 CSS。
解决方案
您似乎从未使用过 Table 组件的 DataSource。对于一个工作示例,您可以查看在 Blazor 中创建 DataGrid 组件。
推荐阅读
- bash - 下载前让 curl 等待
- skorch - Skorch:帮助为多个输出构建分类器
- spring-boot - OppenId 通过 Spring Security OAuth2 连接配置
- php - Laravel 5 如何仅获取数据库中特定用户的一行最新数据
- sql - 如何为Oracle中的列和固定值的组合赋予唯一约束?
- ruby-on-rails - ActiveRecord::StatementInvalid(PG::UndefinedTable: 错误:缺少表“列表”的 FROM 子句条目)
- angular - 单击表单中的图像是否可以打开以相同表单定义的组合框(ionic4)
- python-3.x - 石头、剪刀、纸游戏都想不出问题
- docker - 无法在 docker logs -f 命令中找到初始 jenkins 密码
- react-native - 调度操作后 Redux 状态未更新