如何在 Blazor 子组件中使用 Web API OnInitialized？

Question

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

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

在 parents 中，除了所有其他 HTML 东西外，我还有 child 标签。所以它看起来像（例如）

Parent.razor
@page "/machines"

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

@code
{
}

现在，子组件中有一个 foreach 循环，用于迭代列表（机器类型）中的每个项目如果机器类型来自指定的静态列表，则一切正常。 Screenshot for reference, I am able to get the dropdown that I want

下面的代码。

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"}
    };
}

但是当我尝试使用网络 API（也就是 returns 列表）时，它不起作用。该页面无限期加载，我会遇到错误。代码如下。

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/");
}

}

快速查看我的网站 API，直接访问它 returns 给我这个。所以它工作正常。 Click here to see screenshot of web API results

谁能告诉我做错了什么？是否有必要创建依赖注入来做到这一点？如果是的话，谁能给我指明正确的方向？

提前致谢。

Answer 1

您可能遇到了空引用错误。这可能看起来像 "loads indefinitely".

你需要的是

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

如何在 Blazor 子组件中使用 Web API OnInitialized？

How to consume Web API OnInitialized in Blazor Child Component?

components

httpclient

razor

webassembly

blazor