时间戳

首页 > 解决方案 > Blazor 在运行时在网格单元格中设置属性背景颜色

attributes - Blazor 在运行时在网格单元格中设置属性背景颜色

问题描述

问题是：我有一个网格（智能 htmlelements），当我添加一行时，我想将行中单元格的背景颜色设置为数据行中提供的值 - 因此单元格颜色因行而异。

为了能够拦截单元格格式，我在列上有一个模板。这是触发，我有值（比如#AABBCC），但我需要将 div 的样式属性的背景颜色设置为此 - 这就是生活变得困难的地方。

[编辑：我已经扩展了代码，并重新定义了我尝试但不起作用的问题的性质]

我写了这个

<template id="colourTemplate">
  <div style="width: 100%; height:100%;">
    <div smart-if="value == value">
      ***<div @attributes=ColourFunction(#AABBCC) >{{value}}</div>***
    </div>
  </div>
</template>
<Grid @ref="cdfGrid1" DataSource=@dsColourDifference Appearance=@appearance>
  <Columns>
     <Column DataField="sample1" Label="Colour1" Template="@colourTemplate"> 
     </Column>
  </Columns>
</Grid>

      @code{ 
        Dictionary<string, object> ColourFunction(string value)
        {
          var dict = new Dictionary<string, object>();
          dict.Add("style", "background-color: " + value);
          return dict;
        }
      }

我需要将单元格值推{{value}}送到 div 的背景色中。“值”可用作 div 输出 {{value}} 和 smart-if 但不适用于 div 属性。所以替换这一行

<div style="background-color: #AABBCC">{{value}}</div>

使用传入单元格{{value}}而不是硬编码的#AABBCC. 以下不起作用：

<div style="background-color: {{value}}">{{value}}</div>
<div style="background-color: @value">{{value}}</div>
<div style="background-color: @{value}">{{value}}</div>
<div style="background-color: @{{value}}">{{value}}</div>
<div style="background-color: @(x => {value;}">{{value}}</div>
<div style="background-color: @(x => {{value;}}">{{value}}</div>
//Last two based on the error message from attempt #3
//Code blocks delimited by '@{...}' like '@{ {value} }' for attributes 
//are no longer supported These features have been changed to use 
//attribute syntax. Use 'attr="@(x => {... }"

我尝试了属性飞溅（如下），但我遇到了与{{value}}我内联执行的函数参数相同的问题。

这不起作用（编译错误）

<div @attributes="ColourFunction({{value}})">{{value}}</div>

标签： attributesblazorbackground-color

解决方案

执行此操作的 Blazor 方法是为单元格内容创建一个组件：

Cell.razor

<div style="width: 100%; height:100%;">
    <If Condition="true">
        <div @attributes="@ColourFunction(Color)" >@CurrencyValue</div>
    </If>
</div>

@code {
    [Parameter]
    public string Color { get; set; }

    [Parameter]
    public double Value { get; set; }

    string CurrencyValue => Value.ToString("C2");

    Dictionary<string, object> ColourFunction(string value)
    {
        var dict = new Dictionary<string, object>();
        dict.Add("style", $"background-color: {value};");
        return dict;
    }
}

用法

<Cell Color="red" Value="20"/>

注意：您不必使用字典方法来实现这一点，您可以style="background-color: @Value;"直接放在<div>. 由于问题是关于泼溅的，我只更新了你的函数以使用字符串。

工作REPL

推荐阅读