Blazor:更改绑定(bind)属性不会更新 View

Question

我在 Blazor(服务器端)中有一个带有 InputText 控件的 EditForm。表单绑定(bind)到模型类，InputText 字段绑定(bind)到由本地存储支持的单个属性。

当页面加载时，InputText 显示一个空白值。我调用 InitAsync 方法从本地存储异步加载数据。这可行，但使用加载的数据设置属性不会更新 View 。

如果我使用单向绑定(bind)而不是 InputText(具有双向绑定(bind))将值绑定(bind)到 span 标记，则会出现同样的问题。

从存储中异步加载数据后如何让 View 更新？

View /组件类:

@inject Blazored.LocalStorage.ILocalStorageService localStorage
<EditForm Model="@model" class="pl-4 pr-3 py-1 loginform" OnValidSubmit="@HandleValidSubmit">
    <span>model.OperID</span>    
    <InputText class="form-control mr-sm-2" style="width: 158px" placeholder="OperID"  @bind-Value="@model.OperID"></InputText>
    <button class="btn btn-success oi oi-account-login" @onclick="Login"></button>
</EditForm>


@code {   
    private Models.MainModel model = new Models.MainModel();


    protected override async Task OnAfterRenderAsync(bool firstRender)
    {       
        await model.InitializeAsync(localStorage);
    }


    void Login()
    {

    }


    private void HandleValidSubmit()
    {
        Console.WriteLine("OnValidSubmit");
    }
}

模型类:

public class MainModel
{
    Blazored.LocalStorage.ILocalStorageService? localStorage;

    public MainModel()
    {

    }


    public async Task InitializeAsync(Blazored.LocalStorage.ILocalStorageService localStorage)
    {
        this.localStorage = localStorage;

        if (localStorage != null)
        {
            // the value loads correctly, but setting the property does not cause the view to update as it should. 
            // ConfigureAwait(false) makes no difference...
            OperID = await localStorage.GetItemAsync<string?>("OperID").ConfigureAwait(false); 
        }
    }



    string? operID = "DUMMY"; // null;
    public string? OperID
    {
        get 
        {
            return operID;
        }

        set
        {
            operID = value;

            if (localStorage != null)
            {
                localStorage.SetItemAsync("OperID", value);
            }
        }

    }
}

Answer 1

这是我为使其生效而更改的代码:

protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender) // prevent infinite loop
        {         
            await model.InitializeAsync(localStorage); // load data

            StateHasChanged();  // update view

        }
    }