如何在Blazor子组件中消耗Web API OnInitialized？

Question

我是C#和Blazor WASM的新手，已经为这个问题苦恼了很久。

我有一个父组件 "Parent.razor "和子组件 "Child.razor"。

在parenters中，除了所有其他HTML的东西，我也有子标签。因此，它看起来像（只是举个例子）。

Parent.razor
@page "/machines"

<h1>Machine Information<h1>
<child></child>

@code
{
}

现在，在子组件中有一个foreach循环，迭代列表中的每一个项目(machinetypes)，如果machinetypes是来自一个指定的静态列表，那么一切都很好。截图供参考，我能够得到我想要的下拉式列表。

代码如下。

Child.razor
@using Namespace.Shared.Models
@using Blazorise
@inject HttpClient Http


<select>
    @foreach (var machinetype in machinetypes)
    {
        <option value="@machinetype.MachineTypeId">@machinetype.MachineTypeName</option>
    }
</select>

@code {
    public int amachinetypeid { get; set; }

    //This works
    MachineType[] machinetypes = new MachineType[]
    {
        new MachineType{MachineTypeName="TypeX"},
        new MachineType{MachineTypeName="TypeY"}
    };
}

但是当我尝试使用Web API（也是返回列表）时，它不能工作。页面无限期加载，我会遇到错误。代码如下。

Child.razor
@using Namespace.Shared.Models
@using Blazorise
@inject HttpClient Http


<select>
    @foreach (var machinetype in machinetypes)
    {
        <option value="@machinetype.MachineTypeId">@machinetype.MachineTypeName</option>
    }
</select>

@code {
public int amachinetypeid { get; set; }
public MachineType[] machinetypes;

//This works
//MachineType[] machinetypes = new MachineType[]
//{
//   new MachineType{MachineTypeName="TypeX"},
//    new MachineType{MachineTypeName="TypeY"}
//};

//This does not work    
protected override async Task OnInitializedAsync()
{
    machinetypes = await Http.GetJsonAsync<MachineType[]>("api/machinetype/");
}

}

快速检查我的web API，访问它直接返回这个给我。所以它工作正常。点击这里查看web API结果截图

谁能告知我做错了什么？而且创建依赖注入是必须的吗？如果是，谁能给我指出一个正确的方向？

先谢谢你。

Answer 1

你可能是遇到了一个空引用错误。这可能看起来像 "加载不确定"。

你需要的是

public MachineType[] machinetypes = new MachineType[0];