Blazor：浏览器不更新 HTML 按钮的样式属性答案

【问题标题】：Blazor: Browser doen't update style attribute of HTML buttonBlazor：浏览器不更新 HTML 按钮的样式属性
【发布时间】：2020-09-02 01:50:48
【问题描述】：

我正在使用 Blazor。我在组件中有一个按钮网格，当用户在其他组件中执行某些点击时，我使用方法返回的变量动态设置它们各自的背景图像和边框样式属性。

@for (int id = 0; id < 24; id++)
{
     var buttonId = id;
     <button style="background-image: url(@GetImageFilePath(id)); border-style: @GetBorderStyle(id)"
                                @onclick="@(e => PlayerGridClick(e, buttonId))"></button>
}

上述代码中的两个方法都返回字符串，因此当为组件提供数据的服务调用 NotifyStateChanged() 操作时，代码会动态更新。

如果我在浏览器中查看源代码，我确认这两个属性都按照我的要求进行了更改，但是，只有图像属性由浏览器呈现。如果我刷新浏览器，就会执行border-style 属性。

我已经尝试过 Chrome 和 Firefox，它们的行为都是一样的。

有人有线索吗？

谢谢

要求提供更多信息：

数据服务实现 NotifyStateChanged 如下：

public event Action OnChange;
private void NotifyStateChanged() => OnChange?.Invoke();

客户端组件订阅如下：

// Subscribe to the state of change notification for the TurnSerice
protected override void OnInitialized()
{
    turnService.OnChange += StateHasChanged;
}

// Remove subscription to avoid memory leak
public void Dispose()
{
    turnService.OnChange -= StateHasChanged;
}

客户端检索数据如下：

protected override async Task OnInitializedAsync()
{
    player = await turnService.GetPlayerAsync(nPlayer);
    // if player has piece in hand:
    if(player.pieceInHand.pieceType!=ePieceType.none)
    {
        // calculate where they can place the piece without it being flipped
        // which column?
        int column = player.nPlotSource % 6;
        // highlight all square in this column
        bButtonBorderOn[column] = true;
        bButtonBorderOn[column+6] = true;
        bButtonBorderOn[column+12] = true;
        bButtonBorderOn[column+18] = true;
        // which row?
        int row = player.nPlotSource / 6;
        // highlight all square in this row
        bButtonBorderOn[row * 6] = true;
        bButtonBorderOn[row * 6+1] = true;
        bButtonBorderOn[row * 6+2] = true;
        bButtonBorderOn[row * 6+3] = true;
        bButtonBorderOn[row * 6+4] = true;
        bButtonBorderOn[row * 6+5] = true;
    }
    else
    {
        for (int i = 0; i < 24; i++)
            bButtonBorderOn[i] = false;
    }
    //turnService.Test();

}

bButtonBorderOn 的设置相当粗糙，但它只是为了让它工作。最后在渲染组件时设置变量，如下所示：

protected string GetBorderStyle(int id)
{
     if (bButtonBorderOn[id])
         return "solid";

     return "none";
}

再次感谢:)

【问题讨论】：

可能与 NotifyStateChanged() 有关...能否请您显示所有相关代码。
可能是缓存问题尝试用 shift+ctrl+R 刷新
按要求添加了其他代码。我不认为这是一个缓存问题，但我还是尝试了 shift+ctrl+R - 它没有任何区别。

标签： html css asp.net razor blazor

【解决方案1】：

我已经解决了。

动态样式的目的是向游戏玩家突出显示他们可以放置代币并获得奖励积分的地方。因此，尽管突出显示不起作用，但我继续实施放置规则，发现数据没有正确初始化 - 没有获得加分。

为了解决放置规则问题，我将用于样式的数据变量移至数据源类。这样做也解决了样式问题。

我还是 Blazor 的初学者。经验教训：组件不是可靠的数据保存者:)

感谢所有花时间阅读我的问题的人。

【讨论】：