Blazor-根据条件更改文本的颜色

Question

我有以下五个评级：

if (model.CIIattainedrequired2021 > model.d4)
{
model.CIIrating2021 = "E";
}
if (model.CIIattainedrequired2021 < model.d4)
{
model.CIIrating2021 = "D";
}
if (model.CIIattainedrequired2021 < model.d3)
{
model.CIIrating2021 = "C";
}
if (model.CIIattainedrequired2021 < model.d2)
{
model.CIIrating2021 = "B";
}
if (model.CIIattainedrequired2021 < model.d1)
{
model.CIIrating2021 = "A";
}

我将它们显示在表格中：

<td class="text-center px-2 py-1 mx-0 text-xs">
<p>@model.CIIrating2019</p>
</td><td class="text-center px-2 py-1 mx-0 text-xs">
<p>@model.CIIrating2020</p>
</td><td class="text-center px-2 py-1 mx-0 text-xs">
<p>@model.CIIrating2021</p>
</td><td class="text-center px-2 py-1 mx-0 text-xs">
<p>@model.CIIrating2022</p>
</td><td class="text-center px-2 py-1 mx-0 text-xs">
<p>@model.CIIrating2023</p>
</td><td class="text-center px-2 py-1 mx-0 text-xs">
<p>@model.CIIrating2024</p>
</td><td class="text-center px-2 py-1 mx-0 text-xs">
<p>@model.CIIrating2025</p>
</td><td class="text-center px-2 py-1 mx-0 text-xs">
<p>@model.CIIrating2026</p>

根据答案，我想显示不同颜色的文本如下：

A-GREENB-浅绿色C-黄色D-橙色电子阅读器

Answer 1

对于文本，添加以下内容：

<p style="color:@TextColor(model.CIIrating2020);">@model.CIIrating2020</p>

然后在你的代码中添加这样的东西，以返回基于文本的正确颜色：

private void TextColor(string text) {
switch(text) 
{
case "A":
return "#00FF00"
break;
case "B":
return "#90EE90"
break;
//etc....
}
}

Answer 2

1. 首先需要添加一个使用变量的类在您的td元素中

<td class="text-center px-2 py-1 mx-0 text-xs Add a class
variable here like :@Color-code" >

2. 然后在页面/组件的代码部分，您需要用作上面类的变量和一个基于逻辑切换类的方法：

@code{
private string Color-code{get;set;}
-//method that identifies the color
private void setColorClassMethod(){
if(condition){
//Assuming you want to assign blue class in the case
Color-Code="blueClass";
}
}
}

3. 最后在site.css文件中，为上面使用的变量中的类添加颜色，如：

.blueClass{
//if you want to change background color
background-color:blue;

//if you want to change text color
color:blue;
}

您也可以通过行内css获得相同的结果。但我建议使用类，因为以后可能需要在td.中添加更多样式