Blazor 服务器端 - 子函数中更改的值未更新 UI

Question

所以我在这里做的是，我的子组件 (RMSBaseComponent.razor) 中有一个进度条，它被一个条件变量包围 "IsLoading"

<div style="padding:20px">

@* Page Title *@
<h3>@PageTitle</h3>
<MatDivider></MatDivider>

@* Loader *@
@if (IsLoading)
{
    <MatProgressBar Indeterminate="true"></MatProgressBar>
}
</div>

我正在将这个 Child in Parent(AddNewCity.razor) 设为

<RMSBaseComponent PageTitle="Add New City" @ref="BaseComponent">

</RMSBaseComponent>

在这里，我在 "BaseComponent" 变量中获取子项的引用，但是当我从父组件 class (AddNewCity.cs) 更改 "IsLoading" 的值时，它不会更新 UI 并且不显示 "MatProgressBar" UI。我正在改变价值如下

public partial class AddNewCity
{
    private RMSBaseComponent BaseComponent { get; set; }

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);

        Thread.Sleep(3000);
        BaseComponent.IsLoading = true;
    }
}

我们将不胜感激。

谢谢

Answer 1

你应该在 Thread.Sleep()

之后调用 StateHasChanged()

public partial class AddNewCity
    {
        private RMSBaseComponent BaseComponent { get; set; }

        protected override void OnAfterRender(bool firstRender)
        {
            base.OnAfterRender(firstRender);

            Thread.Sleep(3000);
            BaseComponent.IsLoading = true;
            StateHasChanged();
        }
    }