服务器端 Blazor,无法更新屏幕

Server Side Blazor, can't get screen to update

在标准 WeatherForecastService 中,我添加了一个延迟来模拟缓慢的数据加载:

  public Task<WeatherForecast[]> GetForecastAsync(DateTime startDate)
  {
      var rng = new Random();
      Task.Delay(5000).Wait();
      return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast
      {
          Date = startDate.AddDays(index), TemperatureC = rng.Next(-20, 55),
          Summary = Summaries[rng.Next(Summaries.Length)]
      }).ToArray());
  }

在 FetchData.razor 中,我添加了一个条件微调器和一个按钮来获取数据:

<h1>Weather forecast</h1>
@if (loading)
{
    <div class="spinner-border">Loading</div>
}
@if (forecasts == null)
{
    <button @onclick="@loadthem">Load them</button>
}
else
   //render results

@code {
  private WeatherForecast[] forecasts;
  private bool loading = false;

  private async Task loadthem()
  {
    loading = true;
    this.StateHasChanged();

    forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    loading = false;
  }
}

目的是在数据加载期间获得微调器。这是行不通的。在 SO 的其他答案中,我看到了使用的建议:

InvokeAsync(() => StateHasChanged());

而不是:

this.StateHasChanged();

但这似乎没有什么区别。有没有人知道如何在加载数据时显示此微调器?

嗯,您已经调用了您的方法 GetForecastAsync,但您尚未将其声明为 async Task。当您尝试 await ForecastService.GetForecastAsync(DateTime.Now); 时,我很惊讶您没有收到 Intellisense 警告消息或错误。另外,我建议使用 await Task.Delay(5000);