如何在 Blazor 子组件中使用 Web API 初始化?

Question

我是C#和Blazor WASM的新手，并且已经为此苦苦挣扎了很长一段时间。

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

在父母中，除了所有其他HTML内容外，我还有子标签。所以它看起来像(只是例如(

Parent.razor
@page "/machines"
<h1>Machine Information<h1>
<child></child>
@code
{
}

现在，子组件中有一个 foreach 循环，用于迭代列表中的每个项目(机器类型( 如果计算机类型来自指定的静态列表，则一切正常。 屏幕截图供参考，我能够获得我想要的下拉菜单

下面的代码。

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];