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

【问题标题】：How to consume Web API OnInitialized in Blazor Child Component?如何在 Blazor 子组件中使用 Web API OnInitialized？
【发布时间】：2020-09-12 05:51:17
【问题描述】：

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

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

在父母中，除了所有其他 HTML 内容外，我还有子标签。所以它看起来像（仅作为示例）

Parent.razor
@page "/machines"

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

@code
{
}

现在，子组件中有一个 foreach 循环，用于迭代列表中的每个项目（机器类型）如果 machinetypes 来自指定的静态列表，则一切正常。 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"}
    };
}

但是当我尝试使用 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，直接访问它会返回给我。所以它工作正常。 Click here to see screenshot of web API results

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

提前谢谢你。

【问题讨论】：

除了答案之外，您可能还想查看 OnParametersSetAsync “事件”，以防您的数据加载将取决于来自父级的参数。如果您在服务器端 Blazor 上，则使用 OnInitialized 将被命中两次（由于预渲染），因此您可能希望改用 OnAfterRenderAsync。只是前进的提示。
嗨@rdmptn。感谢您的指点。我想我现在面临类似的问题。现在父组件和子组件可以工作，但是我无法将从父组件传递的参数呈现为默认下拉值。我从父组件传递名为 machinetypeid 的参数。对于子组件，我可以获取机器类型列表，但即使我可以成功传递参数，也无法设置默认值。代码： (
Onpatamerssetasync 就是其中之一。在那里拉几天，如果需要，请致电 StateHasChanged
好的。再次感谢您！ :)

标签： razor components httpclient blazor webassembly

【解决方案1】：

您可能遇到了空引用错误。这可能看起来像“无限加载”。

你需要的是

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

【讨论】：

哦...愚蠢的我。现在可以了。感谢您指出了这一点！ :)