Blazor中@bind绑定select控件时无法默认选中值的问题

问题场景 #

我开发了一个Razor组件，它接收时区名称参数来显示对应时区的当前时间。组件内设置了一个select下拉框，点击后展示系统所有时区供切换，要求下拉框默认选中当前正在显示的时区。

原代码问题 #

最初给select加上@bind="newTimeZone"双向绑定后，下拉框初始状态为空；但移除@bind后，下拉框就能正确选中当前时区。

原代码：

...
<select @bind="newTimeZone" style="width:80%; margin:auto">
    @foreach(TimeZoneInfo tz in TimeZoneInfo.GetSystemTimeZones())
    {
        //Console.WriteLine($"{tz.StandardName} | {_timeZoneInfo.StandardName}");
        if (tz.StandardName == _timeZoneInfo.StandardName)
        {
           Console.WriteLine($"{tz.StandardName} | {_timeZoneInfo.StandardName}");
           <option value="@(tz.StandardName)" selected>@tz.StandardName</option>
        }else{
           Console.Write("|");
           <option value="@(tz.StandardName)">@tz.StandardName</option>
        }
    }
</select>
...
@code{
    // _timeZoneInfo 已定义为当前显示的时区
    public string newTimeZone = "";
}

问题原因 #

@bind是双向绑定，它会优先以绑定变量newTimeZone的值来控制下拉框的选中状态。原代码里newTimeZone初始化为空字符串，这会覆盖option标签上手动设置的selected属性，导致默认选中失效。

解决方法 #

不需要在循环里通过if判断给option添加selected属性，只需把绑定变量newTimeZone的初始值设置为当前时区的StandardName即可。双向绑定会自动匹配对应value的option，实现默认选中效果。

更新后代码：

...
<select @bind="newTimeZone" style="width:80%; margin:auto">
    @foreach(TimeZoneInfo tz in TimeZoneInfo.GetSystemTimeZones())
    {
        //Console.WriteLine($"{tz.StandardName} | {_timeZoneInfo.StandardName}");
        <option value="@(tz.StandardName)">@tz.StandardName</option>
    }
</select>
...
@code{
    // _timeZoneInfo 已定义为当前显示的时区
    public string newTimeZone = _timeZoneInfo.StandardName;
}

内容的提问来源于stack exchange，提问作者Tommy Sanger