Blazorise DataGrid百分比列计算报错：selectedItem为null

错误原因分析 #

• 误用选中行计算全局百分比：你在DataGrid内部直接用selectedItem计算百分比，但selectedItem初始值为null（页面加载时无选中行），且它仅代表当前选中的单行，无法用来计算每一行的百分比。
• 变量引用错误：OnInitializedAsync中将获取的数据赋值给了budgets，但DataGrid绑定的是sales变量；计算sumOfSales时用了大写的Sales，实际应引用私有变量sales。
• 列绑定规则不符：DataGridNumericColumn的Field属性需绑定到SalesTable的属性，你绑定的局部变量percentagecalc不符合规则。

修复方案与代码示例 #

正确思路：确保数据正确加载，基于数据源计算总销售额，用模板列针对每一行实例计算百分比。

修正后的代码：

<DataGrid TItem="SalesTable"
          Data="@sales"
          Sortable="true"
          Filterable="false"
          Editable="true"
          ShowPager="true"
          PageSize="10"
          UseInternalEditing="true"
          EditMode="DataGridEditMode.Inline"
          RowUpdated="@OnRowUpdated"
          RowInserted="@OnRowInserted"
          RowRemoved="@OnRowRemoved"
          NewItemDefaultSetter="@OnNewItemDefaultSetter"
          @bind-SelectedRow="@selectedItem"
          Striped="true"
          Bordered="true"
          Hoverable="true"
          Responsive="true">

    <!-- 自定义百分比列 -->
    <DataGridColumn Caption="Percentage" Editable="false">
        <Template>
            @{
                // context为当前行的SalesTable实例
                decimal percentage = sumOfSales == 0 ? 0 : context.salesvalue / sumOfSales * 100;
                @percentage.ToString("F2")%
            }
        </Template>
    </DataGridColumn>

    <!-- 其他业务列示例 -->
    <DataGridNumericColumn Field="@nameof(SalesTable.salesvalue)" Caption="销售额"></DataGridNumericColumn>

</DataGrid>

@code {
    private List<SalesTable> sales;
    private SalesTable selectedItem;
    string selectedDropValue { get; set; }
    private decimal sumOfSales;

    protected override async Task OnInitializedAsync()
    {
        // 修正数据赋值目标
        sales = await SalesService.GetSalesTablesAsync();
        // 处理空数据源，避免空引用
        sumOfSales = sales?.Sum(f => f.salesvalue) ?? 0;
    }

    // 行更新后重新计算总销售额
    private Task OnRowUpdated(SavedRowItem<SalesTable> args)
    {
        sumOfSales = sales.Sum(f => f.salesvalue);
        return Task.CompletedTask;
    }

    private Task OnRowInserted(SavedRowItem<SalesTable> args)
    {
        sumOfSales = sales.Sum(f => f.salesvalue);
        return Task.CompletedTask;
    }

    private Task OnRowRemoved(SavedRowItem<SalesTable> args)
    {
        sumOfSales = sales.Sum(f => f.salesvalue);
        return Task.CompletedTask;
    }

    private void OnNewItemDefaultSetter(SalesTable item)
    {
        item.salesvalue = 0;
    }
}

额外提示 #

• 增加了总销售额为0的判断，避免除以0错误；
• 行编辑、新增、删除后重新计算总销售额，保证百分比实时更新。

内容的提问来源于stack exchange，提问作者gab4bdo