Blazor中使用MatSelect时如何自定义MatOption选中后的显示内容

要把MatSelect选中项的默认显示格式从「Delhi DEL AirportName」改成「AirportName (DEL)」，可以利用MatBlazor提供的ValueTemplate自定义选中后的显示内容，具体有两种实现方式：

方式一：绑定整个机场对象（推荐） #

这种方式不需要额外查找选中项，直接通过绑定的对象获取字段：

1. 先定义变量存储选中的机场对象：

private ServiceAirport selectedOriginAirport; // ServiceAirport为你的机场数据实体类

2. 修改MatSelect组件代码，使用MatOption绑定对象，并添加ValueTemplate自定义显示：

<MatSelect id="dc_Origin" Label="Origin" @bind-Value="selectedOriginAirport">
    @foreach (var item in GetMasterData.Value.MasterDataResult.ServiceAirports)
    {
        <MatOption Value="item" @onclick='()=> OriginFlight_OnChange(item.AirportCode)' data-loading-text="" >
            <div class="CustomTypeahead">
                <p>
                    <span>@item.CityName</span>
                    <span>@item.AirportCode</span>
                </p>
                <label>@item.AirportName</label>
            </div>
        </MatOption>
    }
    <!-- 自定义选中后的显示模板 -->
    <ValueTemplate>
        @if (selectedOriginAirport != null)
        {
            <span>@selectedOriginAirport.AirportName (@selectedOriginAirport.AirportCode)</span>
        }
    </ValueTemplate>
</MatSelect>

方式二：保持绑定机场代码字符串 #

如果需要继续绑定字符串类型的机场代码，可通过代码匹配对应的机场对象来格式化显示：

<MatSelect id="dc_Origin" Label="Origin" @bind-Value="originCodeEmptyString">
    @foreach (var item in GetMasterData.Value.MasterDataResult.ServiceAirports)
    {
        <MatOptionString Value="@item.AirportCode" @onclick='()=> OriginFlight_OnChange(item.AirportCode)' data-loading-text="" >
            <div class="CustomTypeahead">
                <p>
                    <span>@item.CityName</span>
                    <span>@item.AirportCode</span>
                </p>
                <label>@item.AirportName</label>
            </div>
        </MatOptionString>
    }
    <!-- 自定义选中后的显示模板 -->
    <ValueTemplate>
        @{
            // 根据选中的代码匹配对应的机场对象
            var selectedAirport = GetMasterData.Value.MasterDataResult.ServiceAirports
                .FirstOrDefault(a => a.AirportCode == originCodeEmptyString);
        }
        @if (selectedAirport != null)
        {
            <span>@selectedAirport.AirportName (@selectedAirport.AirportCode)</span>
        }
    </ValueTemplate>
</MatSelect>

注意事项 #

• 确保GetMasterData的数据已加载完成后再渲染组件，避免空引用异常；
• ValueTemplate是MatSelect的内置模板，仅替换选中项的显示内容，不会改变下拉选项的展示样式。

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