如何在运行时设置 Blasorise.DataGrid 单元格的前景色？

Question

如何设置Blazorise。DataGrid单元格在运行时的前景？我想要样本天气预报应用程序的温度的前景。C.要根据其值设置的单元格，例如

• 如果值小于零，则颜色应设置为蓝色
• 如果值介于0和19之间，则颜色应设置为橙色
• else-颜色应设置为红色

@page "/fetchdata"
<PageTitle>Weather forecast</PageTitle>
@using BlazoriseDemo.Data
@using Blazorise;
@inject WeatherForecastService ForecastService
<h1>Weather forecast</h1>
<p>This component demonstrates fetching data from a service.</p>
@if (forecasts == null)
{
<p><em>Loading...</em></p>
}
else
{
<DataGrid TItem="WeatherForecast"
Data="@forecasts"
@bind-SelectedRow="@selectedForecast"
Responsive>

<DataGridColumn Field="@nameof(WeatherForecast.Date)" Caption="Date"/>
<DataGridNumericColumn Field="@nameof(WeatherForecast.TemperatureC)" Caption="C" />
<DataGridNumericColumn Field="@nameof(WeatherForecast.TemperatureF)" Caption="F" />
<DataGridColumn Field="@nameof(WeatherForecast.Summary)" Caption="Summary"/>
</DataGrid>
}
@code {
private WeatherForecast selectedForecast;
private WeatherForecast[]? forecasts;
protected string getTempCForegroundColor(int temperatureC)
{
var color = "blue";
if (temperatureC >= 0 && temperatureC < 20) color = "orange";
else if (temperatureC > 20) color = "red";
return color;
}
protected override async Task OnInitializedAsync()
{
forecasts = await new WeatherForecastService().GetForecastAsync(new DateTime(2022,07,1));
}
}

Answer 1

多种解决方案：

• 使用DataGridColumn的CellStyle属性设置行的内联样式

例如。

<DataGridColumn CellStyle="@((item)=> {if(item.TemperatureC > 19){return "color: #f00";} else { return "color: #00f";}})" [...] />

(但使用内联样式通常是一种糟糕的做法(

• 使用DataGridColumn的CellClass属性将实用程序类设置为与行相关的单元格

例如。

<DataGridColumn CellClass="@((item)=> {if(item.TemperatureC > 19){return "color-hot";} else { return "color-cold";}})" [...] />

然后你有一个实用程序类的.css(color-hot会将颜色设置为红色(，很像引导

• 使用DisplayTemplate自定义单元格的内容，在这里您可以使用"上下文"；表示当前行项目的变量：

<DataGridColumn [...]>
<DisplayTemplate>
<span class="(@context.TemperatureC > 19 ? "color-hot" : "color-cold")">
@context.TemperatureC
</span>
</DisplayTemplate>
</DataGridColumn>