Blazor中SfCircularGauge绑定Temp后无法更新的问题排查

问题描述 #

Blazor页面中，SfCircularGauge组件的指针值绑定到Temp字段，Temp的值通过响应式订阅者赋值，但组件始终无法触发渲染更新。

原代码示例 #

Razor视图部分 #

<div id="ControlRegion">
<SfCircularGauge Theme="Theme.Fluent" EnablePointerDrag="true" >
   ....
            </CircularGaugeRanges>
            <CircularGaugePointers>
                <CircularGaugePointer Value="@Temp" Radius="60%" PointerWidth="7">
                    <CircularGaugeCap Radius="7" Color="#757575">
                        <CircularGaugeCapBorder Width="8"></CircularGaugeCapBorder>
                    </CircularGaugeCap>
                    <CircularGaugeNeedleTail Length="25%"></CircularGaugeNeedleTail>
                </CircularGaugePointer>
            </CircularGaugePointers>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</SfCircularGauge>
</div>

@code部分 #

@code {
    private readonly SensorObs _sensorObs = new();
    public int Temp { get; set; } = 20;

    protected override async Task OnInitializedAsync()
    {        
        if (SynchronizationContext.Current != null)
            _sensorObs.SubscribeOn(SynchronizationContext.Current).ObserveOn(Scheduler.Default).Where(x => x.WindSpeed > 5)
                .Subscribe(x =>
                {
                    Temp = x.Temp;
                    this.InvokeAsync(this.StateHasChanged);
                });

        await Task.Delay(1000);
        _sensorObs.Start();
    }
}

问题原因 #

1. 调度器配置冲突：SubscribeOn(SynchronizationContext.Current)将订阅逻辑绑定到UI线程，ObserveOn(Scheduler.Default)又切换到后台线程，导致UI更新操作的上下文混乱，变更检测无法正确触发。
2. 订阅未妥善管理：未保存订阅的IDisposable引用，可能引发内存泄漏或订阅失效。
3. 属性更新的变更检测不可靠：自动属性Temp的更新虽手动调用了StateHasChanged，但线程上下文问题会导致组件无法感知值变化。

解决方案 #

修改后的@code部分 #

@code {
    private readonly SensorObs _sensorObs = new();
    private int _temp;
    private IDisposable? _subscription;

    public int Temp
    {
        get => _temp;
        set 
        { 
            _temp = value; 
            _ = InvokeAsync(StateHasChanged);
        }
    }

    protected override async Task OnInitializedAsync()
    {
        _subscription = _sensorObs.Where(x => x.WindSpeed > 5)
              .Subscribe(x => Temp = x.Temp);

        await Task.Run(() => _sensorObs.Start());
    }

    public void Dispose()
    {
        _subscription?.Dispose();
    }
}

关键修改点 #

• 将Temp改为带私有字段的属性，在setter中调用InvokeAsync(StateHasChanged)，确保UI线程可靠触发变更检测。
• 移除错误的调度器配置，让订阅在默认上下文执行，避免线程切换导致的UI更新异常。
• 保存订阅的IDisposable引用，在组件销毁时释放资源，避免内存泄漏。
• 使用Task.Run启动传感器逻辑，避免阻塞UI线程。

内容的提问来源于stack exchange，提问作者Benoit Goethals