MatBlazor MatSelect 控制 MatOptions 的顺序

Question

我使用 MatBlazor MatSelect 创建了以下代码：

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

但它一直按照“值”而不是我编码的顺序对其进行排序。我什至尝试将其更改为“bool”而不是“int”，但似乎仍然先排序为 false。

如何控制其显示顺序并使“使用中”成为默认选择？

Answer 1

要使“In Service”成为默认选择，您可以在

myStatus

块中设置

@{...}

值，代码如下：

@code {
    private int myStatus = 1; // Set default to 1 for "In service"
}
<MatSelect Outlined="true" Id="class-status" TValue="int" @bind-Value="@myStatus">
    <MatOption Value="1">In service</MatOption>
    <MatOption Value="0">Out of service</MatOption>
</MatSelect>

要控制选择控件中显示的选项顺序，可以使用以下代码添加选项，并使用 OrderBy 或 OrderByDescending 方法对选项进行排序。

@code {
    private int myStatus = 1; // Set default to 1 for "In service"

    //order by the option using OrderBy or OrderByDescending method.
    private List<KeyValuePair<int, string>> statusOptions = (new List<KeyValuePair<int, string>>
      {
          new KeyValuePair<int, string>(1, "In service"),
          new KeyValuePair<int, string>(0, "Out of service")
      }).OrderByDescending(c => c.Key).ToList();
}
<MatSelect Outlined="true" Id="class-status" TValue="int" @bind-Value="@myStatus">
    @foreach (var option in statusOptions)
    {
        <MatOption Value="@option.Key">@option.Value</MatOption>
    }
</MatSelect>

结果如下：

ASC结果：

DESC 结果：