AntDesignBlazorでコンボボックスを作成する

Combobox.razor

<div>
    @Title
    <Select 
        TItem="KeyValuePair<int,string>"
            TItemValue="KeyValuePair<int,string>"
            DataSource="@Source"
            LabelName="@nameof(KeyValuePair<int, string>.Value)"
            @bind-value="@ChildValue"/>
    Selected Value: @Value.Value
</div>

@code {
    [Parameter]
    public List<KeyValuePair<int, string>> Source { get; set; } = new List<KeyValuePair<int, string>>();
    [Parameter]
    public string Title { get; set; } = string.Empty;
    [Parameter] 
    public KeyValuePair<int, string> Value { get; set; }
    [Parameter]
    public KeyValuePair<int, string> ChildValue
    {
        get => Value;
        set => ValueChanged.InvokeAsync(value);
    }
    [Parameter]
    public EventCallback<KeyValuePair<int, string>> ValueChanged { get; set; }
}

Demo.razor

<NormalCombobox Source="@model.DataSources" @bind-Value="@model.SelectedValue" Title="テスト" />
<Button @onclick="@model.Log"/>
@code {
    public ViewModel model = new ViewModel();
}

ViewModel.cs

public class ViewModel
{
    public KeyValuePair<int, string> SelectedValue { get { return _SelectedValue; } set { _SelectedValue = value; } }
    public List<KeyValuePair<int, string>> DataSources { get { return _dataSources.ToList(); } }

    Dictionary<int, string> _dataSources = new Dictionary<int, string>()
    {
        {1,"test1" },
        {2,"test2" },
        {3,"test3" },
    };

    KeyValuePair<int, string> _SelectedValue = new KeyValuePair<int, string>();

    public async Task Log()
    {
        Debug.WriteLine(_SelectedValue.Key);
    }
}

参考情報