组件加载html/css时的blazor加载微调器

Question

我有一件小事需要做。这是我的问题。我打开一个组件，然后我可以点击"；编辑"；然后我需要3-4秒，而这需要html/css显示在页面上。我想做的是，当我点击"；编辑"；我设置"；loading＝true"；，并且当组件完成呈现该新的html/css时；loading＝false"；。以下是我试图实现的一个示例：

if (!edit) {
<h2>test</h2>
@foreach (var item in items) {
<p>Test item</p>
}
}
else {
<button @onclick = "() => { edit = true; }">
<h2>test other </h2>
<input />
<input />
}

这就是我设置加载微调器在页面上显示的方式：

await InvokeAsync(() => { loading = true; });
await InvokeAsync(() => { loading = false; });

所以，我的问题是，当一个人按下编辑键时，微调器会自动在屏幕上开始旋转。我知道如何在OnInitializedAsync时进行初始化，但在这种特定情况下，它并没有被初始化，它只是显示了组件的不同部分(但它需要5秒，大量代码(。有办法吗？

Answer 1

您需要StateHasChanged进行中间更新。Blazor在活动前后使用它，但这对你没有帮助。

<button @onclick="@DoLogic">Load</button>

async Task DoLogic()
{
edit = false;         // means loading == true
StateHasChanged();    // to be sure, probably not needed
await Task.Delay(1);  // allow time for the rendering
// do the actual loading
edit = true;          // means loading == false
}

这里的技巧是await Task.Delay(1);，所以您的方法会暂停一段时间，Blazor可以更新DOM。

这里没有InvokeAsync的理由。