值不能为空。 （参数 'source'）Blazor 中的 Apex Chart 错误

Question

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

blazor.webassembly.js:1暴击:Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] 未处理的异常呈现组件：值不能为空。 （参数'source'） System.ArgumentNullException: 值不能为空。 （参数'source'） 在 System.Linq.ThrowHelper.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 ..\ApexChart\Blazor-ApexCharts\src\Blazor-ApexCharts\Series\ApexPointSeries.cs:line 74 at ApexCharts.ApexChart1[[BlazorApexCharts.Docs.Order, BlazorApexCharts.Docs, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null].SetSeries() in ..\ApexChart\Blazor-ApexCharts\src\Blazor-ApexCharts\ApexChart.razor.cs：第 222 行 在 ApexCharts.ApexChart1.<Render>d__55[[BlazorApexCharts.Docs.Order, BlazorApexCharts.Docs, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext() in ..\ApexChart\Blazor-ApexCharts\src\Blazor-ApexCharts\ApexChart.razor.cs:line 203 at ApexCharts.ApexChart1.d__44[[BlazorApexCharts.Docs.Order, BlazorApexCharts.Docs, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext( ) 在..\ApexChart\Blazor-ApexCharts\src\Blazor-ApexCharts\ApexChart.razor.cs:第 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();
    }


}

Order.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

您提供的是空对象，库不支持该对象。 您应该像这样初始化 Orders 变量：

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

或者像这样在 if 条件中包裹整个 apexchart 标签：

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