Blazor中Spinner加载完成后无法关闭/UI不更新的问题求助
Blazor中Spinner加载完成后无法关闭/UI不更新的问题求助
大家好,我现在在Blazor项目里遇到了一个棘手的问题,想请教下社区的各位大佬:
项目情况
我基于.NET 9.0.x、C#和Blazor默认项目开发,想在天气页面加载数据的时候显示一个加载Spinner,参考了现有的Spinner组件实现来做的。
问题现象
目前Spinner可以在数据开始加载时正常显示,但等数据加载完成后,调用Hide方法想关闭它,UI完全没反应——调试的时候明明看到HideLoadingSpinner()方法已经执行了,但界面上的Spinner就是不消失。
我的实现代码
天气页面的加载逻辑
在天气页面的OnParametersSetAsync方法里,我先调用显示Spinner,模拟加载后生成数据,再调用隐藏:
protected override async Task OnParametersSetAsync() { _spinnerService.Show();// 这一步是正常的,Spinner能出来 // 模拟异步加载耗时 await Task.Delay(3000); var startDate = DateOnly.FromDateTime(DateTime.Now); var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" }; forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast { Date = startDate.AddDays(index), TemperatureC = Random.Shared.Next(-20, 55), Summary = summaries[Random.Shared.Next(summaries.Length)] }).ToArray(); _spinnerService.Hide();// 这里就不行了,UI完全不更新 }
Spinner组件的事件绑定
在Spinner.razor里,我绑定了服务的事件来控制显示隐藏:
protected override void OnInitialized() { _spinnerService.OnShow += ShowLoadingSpinner; _spinnerService.OnHide += HideLoadingSpinner; }
服务相关配置
- SpinnerService已经注入到天气页面里了
- 我也在
program.cs里把它注册成了Scoped服务 - 调试时能确认,不管是Show还是Hide的事件都触发了,
HideLoadingSpinner()方法确实跑了一遍,但界面就是没变化
我试过的办法
我分别尝试了两种控制Spinner显示的方式:
- 用一个
IsVisible布尔标志来控制组件渲染 - 给Spinner元素动态添加/移除
hiddenCSS类
但不管用哪种,调用Hide的时候UI都不更新,Spinner还是停在那里。
有没有大佬能帮我看看哪里出问题了?或者有没有其他解决思路?麻烦各位了!
内容来源于stack exchange
相关产品推荐
相关产品推荐

