Blazor WebAssembly - 子组件不刷新

Question

有人能告诉我为什么在我的情况下子组件不刷新吗？(没有错误(我还尝试将其加载为DynamicComponent，它触发了按钮，但也没有发生任何错误。

谢谢。

<div id="StackOfCards">
@while (a < 52)
{
b = Convert.ToInt32(Math.Floor(c / 4));
lpx = 40 + (b * 0.1) + "%";
tpx = 41 + (b * 0.1) + "%";
<div class="cards" style="left: @lpx; top: @tpx; z-index: @a;"></div>
c--;
a++;
}
</div>
<button id="btnNewGame" @onclick="NewGame" style="top: 54%;left: 52%;position: absolute;">New game</button>
@code {
decimal a = 0;
int b = 0;
decimal c = 52;
string lpx = "";
string tpx = "";
public void NewGame()
{
a = 0;
b = 5;
c = 52;
StateHasChanged();
}
}

Answer 1

可能是因为b是int，0.1乘以5是整数0。将b更改为20，它就会起作用。将b替换为double或float。

Answer 2

请参阅下面的代码以获得代码的略微修改版本。

更改：

1. 有一个名为locala的a的本地循环副本来修复循环中的值
2. 我在循环中为div添加了一些输出
3. 我已经将按钮点击事件处理程序修改为async，并添加了一个延迟来显示重新绘制确实发生了
4. 将按钮移到页面顶部，以便于演示

@page "/"
<button class="btn btn-success" @onclick="NewGame">New game</button>
<div id="StackOfCards">
@while (a < 52)
{
var locala = a;
b = Convert.ToInt32(Math.Floor(c / 4));
lpx = 40 + (b * 0.1) + "%";
tpx = 41 + (b * 0.1) + "%";
<div class="cards" style="left: @lpx; top: @tpx; z-index: @a;">card @locala</div>
c--;
a++;
}
</div>
@code {
decimal a = 0;
int b = 0;
decimal c = 52;
string lpx = "";
string tpx = "";
public async Task NewGame()
{
a = 52;
await Task.Delay(2000);
a = 0;
b = 5;
c = 52;
}