如何在第一个 url 完成后获取另一个 url 并在 foreach 循环中显示

Question

我有一个关于 Blazor 的初学者问题，我正在努力解决这个问题。

以下是我刚刚为显示问题而制作的示例代码：

<ul>

    @foreach(var student in classroom) {
 
    }

</ul>


ClassRoomModel classroom; 
protected override async Task OnInitializedAsync()
{

  classroom = await ClassRommService.GetClassRoomDetails(); 
}

但是在我的 foreach 循环中，我想进行第二个查询，使用 student.url 来获取所有学生的详细信息。

我尝试创建另一种方法 GetStudentDetailsById(string url){} 并尝试将其放在 foreach 循环中，如下所示：

@foreach(var student in classroom)
{
  await GetStudentDetailsById(student.url)
...
}

但是 Blazor 抱怨说它不能在循环内使用函数，我认为这种方法可能是一种反模式。

我如何创建一个函数，等待课堂函数返回 JSON，然后将另一个查询发送到 student.url 以在 for each 循环中使用。

感谢

Answer 1

您可以创建一个名为 StudentListItem.razor 的新组件，并在其中添加获取学生详细信息的逻辑。是这样的：

学生列表项.razor:

@if (studentDetails != null)
{
    <li>
       ...
    </li>
}

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

    private string currentUrl;
    private StudentDetails studentDetails;

    protected override async Task OnParametersSetAsync()
    {
        if (currentUrl != Url)
        {
            currentUrl = Url;
            studentDetails = await GetStudentDetailsById(currentUrl);            
        }        
    }
}

然后像这样使用：

<ul>
    @foreach (var student in classroom) {
        <StudentListItem Url="@student.url" />
    }
</ul>

@code {
    ClassRoomModel classroom;

    protected override async Task OnInitializedAsync()
    {    
        classroom = await ClassRommService.GetClassRoomDetails();
    }
}

编辑：

或者，您可以在OnInitializedAsync 中获取所有学生详细信息并创建结果列表。

@if (studentDetailsList != null)
{
    <ul>
        @foreach (var studentDetails in studentDetailsList)
        {
            ...
        }
    </ul>
}
else
{
    <p>Loading...</p>
}

@code {
    ClassRoomModel classroom;

    IEnumerable<StudentDetails> studentDetailsList;

    protected override async Task OnInitializedAsync()
    {    
        classroom = await ClassRommService.GetClassRoomDetails();

        var fetchStudentDetailsTasks = classroom.Select(student => GetStudentDetailsById(student.url));
        studentDetailsList = await Task.WhenAll(fetchStudentDetailsTasks);
    }
}