在 Blazor 中切换按钮标题的正确方法是什么？

Question

我有一个名为 Earth 的子组件，它有一个按钮。我们可以多次按下按钮来启动和停止地球旋转。

<button @onclick="Toggle">
    @if (isMoving)
    {
        <text>Stop Spinning</text>
    }
    else
    {
        <text>Start Spinning</text>
    }
</button>

@code {
    private bool isMoving = true;

    private void Toggle()
    {
        isMoving = !isMoving;
        Console.WriteLine(DateTime.Now);
    }
}

按钮的标题必须使用两个互斥选项Stop Spinning 和Start Spinning 切换。

我在一个名为God 的可路由组件中使用Earth 组件，如下所示。

@page "/God"

<Earth />

我启动应用程序并导航到God。到目前为止，一切都很好。但是如果我按下按钮，我得到一个错误：

发生了未处理的错误。重新加载

在调试它时，我指向一个非常长的代码。这是精简版。

var Module=typeof Module!=="undefined"?Module:{};var moduleOverrides={};var key;for(key in Module){if(Module.hasOwnProperty(key)){moduleOverrides[key]=Module[key]}}var arguments_=[];var thisProgram="./this.program";var quit_=function(status,toThrow){throw toThrow};var ENVIRONMENT_IS_WEB=false;var ENVIRONMENT_IS_WORKER=false;var ENVIRONMENT_IS_NODE=false;var ENVIRONMENT_IS_SHELL=false;ENVIRONMENT_IS_WEB=typeof window==="object";ENVIRONMENT_IS_WORKER=typeof importScripts==="function";ENVIRONMENT_IS_NODE=typeof process==="object"&&typeof process.versions==="object"&&typeof treaming compile failed: "+reason);err("falling back to ArrayBuffer instantiation");instantiateArrayBuffer(receiveInstantiatedSource)})})}else{return instantiateArrayBuffer(receiveInstantiatedSource)}}if(Module["instantiateWasm"]){try{var 

问题

在 Blazor 中切换按钮标题的正确方法是什么？

编辑

我用两种浏览器进行了测试：Chrome（不工作）和 Edge（工作）。

Answer 1

你可以这样做：

<button @onclick="Toggle">@Caption</button>

@code {
    private string Caption => isMoving ? "Start Spinning" : "Stop Spinning";


    private bool isMoving = true;

 
    private void Toggle()
    {
        isMoving = !isMoving;
        Console.WriteLine(DateTime.Now);
    }
}