微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何从 Blazor 中的不同 API 路由获取另一个列表的列表?

如何解决如何从 Blazor 中的不同 API 路由获取另一个列表的列表?

我遇到了麻烦,我想知道如何解决这个问题。我正在尝试学习 Blazor,并且我正在使用一个开放的 API 来接收有关权力的游戏之家及其所有宣誓成员的数据。所以我基本上想要接收的是另一个列表中的列表,但有两条不同的路线。我的预期输出是单击房屋名称,并且应将另一个列表与成员一起添加到我的表中

预期输出

House Targaryen - Daenerys Targaryen
                - Aegon Targaryen

等等...

家路线https://anapioficeandfire.com/api/houses/378 人物路线https://anapioficeandfire.com/api/characters/33

    @page "/fetchdata"
@using System.Text.Json.Serialization
@using System.Text.Json
@inject HttpClient Http


<h1>Game of Thrones</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (houses == null)
{
    <p>
        <em>Loading...</em>
    </p>
}
else
{
    <table class="table">
        <thead>
        <tr>
            <th>Houses</th>
        </tr>
        </thead>
        <tbody>
        @foreach (var house in houses.Take(5))
        {
            <tr>
                <td>@house.Name</td>
                @foreach (var character in house.SwornMembers.Take(5))
                {
                    <td>
                        <tr>@character</tr>
                    </td>
                }
            </tr>
        }
        </tbody>

    </table>
}

@code {
    List<House> houses;
    List<Character> characters;

    protected override async Task OnInitializedAsync()
    {
        houses = await Http.GetFromJsonAsync<List<House>>("https://anapioficeandfire.com/api/houses/");

        Console.WriteLine(houses);
    }

    public class House
    {
        public string Name { get; set; }
        public List<Character> SwornMembers { get; set; }
    }

    public class Character
    {
        public string Name { get; set; }
        public string Gender { get; set; }
        public string Culture { get; set; }
        public string Born { get; set; }
    }

}

解决方法

快速浏览一下 api,您不能通过诸如 ?id=1,2,3,4 之类的东西加载多个字符。

就像 timur 所说的,您必须进行大量的 GetFromJSONAsync 调用。如果您查看 json 响应,就会发现 SwornMembers 属性不是一个对象,而是一个您必须单独加载的 URL。在 House 类中,将 List<Character> 更改为 List<string>

然后创建一个接受 url 的 CharacterFromApi 组件。 <CharacterFromApi URL="@character"/>

@foreach (var character in house.SwornMembers.Take(5))
{
    <td>
        <tr><CharacterFromApi URL="@character"/></tr>
    </td>
}
//FYI the usings can be moved into the _Imports.razor file
@using System.Text.Json.Serialization
@using System.Text.Json
@inject HttpClient Http

<div>
   @(Character?.Name)
</div>

@code {
    [Parameter] 
    public string URL { get; set; }   

    Character Character { get; set; }

    protected override async Task OnInitializedAsync()
    {
        Character = await Http.GetFromJsonAsync<Character>(URL);
    }

    public class Character
    {
        public string Name { get; set; }
        public string Gender { get; set; }
        public string Culture { get; set; }
        public string Born { get; set; }
    }
}

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。