Blazor中Observable属性绑定与Sf ProgressBar渲染问题求助

你的问题核心在于Blazor的UI更新机制和Observable属性的订阅处理没做好，具体来说：

1. 你注入的FetchService.Counter是普通属性，没有实现INotifyPropertyChanged接口，Blazor无法感知它的数值变化，只会在异步方法（GetAsync）执行完成后统一刷新一次UI。
2. 后端的IObservable<long>（CounterState）没有被正确订阅，数据变化时无法同步到UI层，也没法触发Blazor的组件重渲染。

下面是两种直接可行的解决方法：

方法一：让服务实现属性变更通知 #

修改FetchService，让它实现INotifyPropertyChanged，同时订阅后端的CounterState，在数值变化时主动通知UI更新。

1. 更新FetchService代码 #

using System.ComponentModel;
using System.Runtime.CompilerServices;

public class FetchService : INotifyPropertyChanged
{
    private readonly SomeService _someService;
    private long _counter;

    // 带变更通知的Counter属性
    public long Counter
    {
        get => _counter;
        set
        {
            if (_counter != value)
            {
                _counter = value;
                OnPropertyChanged();
            }
        }
    }

    public FetchService(SomeService someService)
    {
        _someService = someService;
        // 订阅后端的Observable状态，自动同步Counter值
        _someService.CounterState.Subscribe(newValue => Counter = newValue);
    }

    public async Task GetAsync()
    {
        // 触发后端数据加载逻辑
        await _someService.LoadDataAsync();
    }

    // 实现INotifyPropertyChanged接口
    public event PropertyChangedEventHandler? PropertyChanged;
    protected virtual void OnPropertyChanged([CallerMemberName] string? propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. Blazor页面绑定代码 #

@inject FetchService FetchService

<SfProgressBar Value="@FetchService.Counter" Maximum="100" />
<p>当前计数：@FetchService.Counter</p>

<button @onclick="FetchService.GetAsync">开始加载</button>

方法二：组件内直接订阅Observable #

如果不想修改服务，也可以在Blazor组件里直接订阅后端的CounterState，收到新值时手动触发UI更新。

@inject SomeService SomeService
@implements IDisposable

<SfProgressBar Value="@_currentCounter" Maximum="100" />
<p>当前计数：@_currentCounter</p>

<button @onclick="LoadData">开始加载</button>

@code {
    private long _currentCounter;
    private IDisposable? _counterSubscription;

    protected override void OnInitialized()
    {
        // 订阅后端Observable，更新数值后强制UI重渲染
        _counterSubscription = SomeService.CounterState.Subscribe(newValue =>
        {
            _currentCounter = newValue;
            // 必须调用StateHasChanged，Blazor才会刷新UI
            InvokeAsync(StateHasChanged);
        });
    }

    private async Task LoadData()
    {
        await SomeService.LoadDataAsync();
    }

    // 组件销毁时取消订阅，避免内存泄漏
    public void Dispose()
    {
        _counterSubscription?.Dispose();
    }
}

关键注意点 #

• Blazor不会自动监听普通属性的变化，必须通过INotifyPropertyChanged事件或者手动调用StateHasChanged()来触发UI更新。
• 使用IObservable时必须记得取消订阅（通过IDisposable），否则会造成内存泄漏。
• Syncfusion的SfProgressBar本身没有问题，只要绑定的数据源能正确触发Blazor的更新机制，就能实时渲染进度变化。

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