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 就可以了。 用 double 或 float 替換 b。

Answer 2

請參閱下面的代碼以了解代碼的稍微修改版本。

變化：

1. 有a稱為locala的本地循環副本來修復循環內的值。
2. 我在循環中向 div 添加了一些輸出。
3. 我已將按鈕單擊事件處理程序修改為異步並添加了延遲以顯示重繪確實發生了。
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;
    }