如何控制MatBlazor MatSelect的MatOption顺序并设置默认选中项？

1. 控制MatOption显示顺序 #

MatSelect默认会自动按选项值排序，要禁用这个行为，给MatSelect添加AutoSort="false"属性，即可严格按照你编写MatOption的顺序展示选项。

2. 设置默认选中“In Service” #

只需在绑定的变量初始化时，赋值为对应选项的Value值：

• 若使用int类型，初始化myStatus = 1
• 若使用bool类型，将“In Service”对应的MatOption的Value设为true，同时初始化myStatus = true

修改后的int类型代码示例 #

<MatSelect Outlined="true" Id="class-status" TValue="int" @bind-Value="@myStatus" AutoSort="false">
    <MatOption Value="1">In service</MatOption>
    <MatOption Value="0">Out of service</MatOption>
</MatSelect>

@code {
    private int myStatus = 1; // 初始化设为1，默认选中In service
}

修改后的bool类型代码示例 #

<MatSelect Outlined="true" Id="class-status" TValue="bool" @bind-Value="@myStatus" AutoSort="false">
    <MatOption Value="true">In service</MatOption>
    <MatOption Value="false">Out of service</MatOption>
</MatSelect>

@code {
    private bool myStatus = true; // 初始化设为true，默认选中In service
}

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