C#Blazor显示微调器，直到foreach循环结束

Question

我有一个页面，它加载C#Blazor中的项目列表。我正试图找出一种微调器显示的方式，直到我的foreach循环迭代完所有列表项。这是我当前的代码：

@foreach (var f in FlyersState.Value.Flyers)
{
@if (isLoading)
{
<div class="spinner"></div>
}
else
{
<tr>
<td class="clickable" @onclick="()=>OpenFlyerDetails(f)">
@f.DealNo
<a href="flyers/@(f.Id)" target="_blank"><i class="fas fa-external-link-alt"></i></a>
</td>
<td>@f.Range</td>
<td>@f.Id</td>
<td>
<a class=" float-right" href="" data-target="#flyerModal" data-toggle="modal" @onclick="(() => EditFlyer(f))">
<i class="fas fa-edit"></i>
</a>
</td>
<td>
<a class=" float-right" href="" data-target="#confirmModal" data-toggle="modal" @onclick="(() => ShowDeleteConfirmAtionDialog(f))">
<i class="far fa-trash-alt"></i>
</a>
</td>
</tr>
}
}

我的页面就是这样初始化的：

private Flyer selectedFlyer => FlyersState.Value.SelectedFlyer;
private bool isLoading = true;
Flyer flyer = new Flyer();
protected override void OnInitialized()
{
base.OnInitialized();
Dispatcher.Dispatch(new LoadFlyersAction());

}

我遇到的问题是，当循环迭代完我的表时，我不确定如何将isLoading设置为false。如有任何帮助，我们将不胜感激。

Answer 1

工作Blazor演示

我已经创建了一个工作Blazor Fiddle，你可以在这里作为指南。它模拟长时间运行的数据查询，并在运行时显示加载图标。

代码的主要问题是if(isLoading)条件在构建表的循环中。这些需要通过将if语句移到循环之外来逆转。然后，它将根据isLoading的值正确显示加载图标或显示表格。

因此，与此逻辑不同：

loop over data {
if loading 
show icon 
else 
show table rows
end
}

你想让它看起来像这样：

if (loading) 
show icon
else 
loop over data {
show table rows
}
end 

我建议的另一个更改是将数据加载到OnInitializedAsync()或OnAfterRenderAsync()中。这两者都是异步的，您可以"；等待"；您的数据，而不需要额外的Dispatcher。请注意，Blazor服务器由于预渲染而两次调用初始化，如果您有一个长时间运行的查询，您可能希望避免这种情况。然而，解决这一问题的办法超出了问题的范围。

Answer 2

我会这样做：

<div id="spinner" class="@(spinner-state)">
@foreach (var f in FlyersState.Value.Flyers)
{
@if (isLoading)
{
<div class="spinner"></div>
}
else
{
<tr>
<td class="clickable" @onclick="()=>OpenFlyerDetails(f)">
@f.DealNo
<a href="flyers/@(f.Id)" target="_blank"><i class="fas fa-external-link-alt"></i></a>
</td>
<td>@f.Range</td>
<td>@f.Id</td>
<td>
<a class=" float-right" href="" data-target="#flyerModal" data-toggle="modal" @onclick="(() => EditFlyer(f))">
<i class="fas fa-edit"></i>
</a>
</td>
<td>
<a class=" float-right" href="" data-target="#confirmModal" data-toggle="modal" @onclick="(() => ShowDeleteConfirmAtionDialog(f))">
<i class="far fa-trash-alt"></i>
</a>
</td>
</tr>
}
}

然后，在代码中

private string spinner-state = "show-spinner";
private Flyer selectedFlyer => FlyersState.Value.SelectedFlyer;
private bool isLoading = true;
Flyer flyer = new Flyer();
protected override void OnInitialized()
{
base.OnInitialized();
Dispatcher.ShutdownStarted += HideSpinner();
Dispatcher.Dispatch(new LoadFlyersAction());

}
void HideSpinner(object sender, DispatcherShutdownEventArgs e)
{
spinner-state = "hide-spinner";
}