值不能为空。(参数"源")Blazor 中的顶点图表中的错误

Question

我在blazor中使用Apex chart创建了一个简单的条形图组件。但我收到了这个错误信息。

blazor.webassembly.js:1 crit:Microsoft.AspNetCore.Components.webassembly.Frendering.WebAssemblyRenderer[100]呈现组件时出现未处理的异常：值不能为null。(参数"source"(System.ArgumentNullException:值不能为null。(参数"source"(位于System.Linq.SthrowHelper.ThrowArgumentNullException(ExceptionArgument参数(在System.Linq.GroupedEnumerable2[[BlazorApexCharts.Docs.Order, BlazorApexCharts.Docs, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null],[System.Object, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]]..ctor(IEnumerable1源，Func2 keySelector, IEqualityComparer1比较器(位于System.Linq.Enumerable.GroupBy[Order，Object](IEnumerable1 source, Func2 keySelector(在ApexCharts.ApexPointSeries1[[BlazorApexCharts.Docs.Order, BlazorApexCharts.Docs, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].GetData() in ..ApexChartBlazor-ApexChartssrcBlazor-ApexChartsSeriesApexPointSeries.cs:line 74 at ApexCharts.ApexChart1[[BlazorApexCharts.Docs.Order，BlazorApexCharts.Docs，Version=1.0.0.0，Culture=neutral，PublicKeyToken=null]]中的SetSeries((。。\ApexChart\Blazor ApexCharts\src\ Blazor ApexCharts\ApexChart.rarr.cs:line 222在ApexCharts.ApexChart1.<Render>d__55[[BlazorApexCharts.Docs.Order, BlazorApexCharts.Docs, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext() in ..ApexChartBlazor-ApexChartssrcBlazor-ApexChartsApexChart.razor.cs:line 203 at ApexCharts.ApexChart1.d__44[[BlazorApexCharts.Docs.Order，BlazorApexCharts.Docs，Version=1.0.0.0，Culture=neutral，PublicKeyToken=null]].MoveNext((in。。\ApexChart\Blazor ApexCharts\src\ Blazor ApexCharts\ApexChart.rarr.cs:line 46

条形图组件代码

@page "/test-bar-chart"
@using System.Net.Http
@using System.Net.Http.Json
@using System.Threading.Tasks
@inject HttpClient Http
<DemoContainer>
<ApexChart TItem="Order"
Title="Order Net Value">
<ApexPointSeries TItem="Order"
Items="Orders"
Name="Gross Value"
XValue="@(e => e.Country)"
YAggregate="@(e => e.Sum(e => e.GrossValue))"
OrderByDescending="e=>e.Y"
SeriesType="SeriesType.Bar"
/>
</ApexChart>
</DemoContainer>
@code {
private List<Order> Orders { get; set; } 
protected override async Task  OnInitializedAsync()
{
try
{
Orders=  await Http.GetFromJsonAsync<List<Order>>("/api/Apx");
}
catch (Exception ex)
{
Orders = null;
Console.WriteLine(ex.Message);
}

await base.OnInitializedAsync();
}

}

订单.cs

public class Order
{
public Guid OrderId { get; set; } = Guid.NewGuid();
public string CustomerName { get; set; }
public string Country { get; set; }
public DateTimeOffset OrderDate { get; set; }
public OrderType OrderType { get; set; }
public decimal GrossValue { get; set; }
public decimal NetValue { get =>  GrossValue * (1 - (DiscountPrecentage / 100)) ; }
public decimal DiscountPrecentage { get; set; }
}
public enum OrderType
{
Web, Contract, Mail, Phone
}

我该如何解决这个问题？？请帮帮我，谢谢你的回答

Answer 1

您提供的是一个null Object，库不支持它。您应该初始化Orders变量，如下所示：

private List<Order> Orders { get; set; } = new();

或者将整个apexchart标签封装在这样的if条件中：

@if(Orders is not null) 
{
<ApexChart TItem="Order"
Title="Order Net Value">
......
......
</ApexChart>
}