IgbCombo – 選択されている値を取得する方法

IgbCombo で選択されている値を取得したい場合は、JavaScript 側で IgbCombo の描画要素である igc-combo を取り出してください。igc-combo の value が選択されている値です。
（※C#コードでの取得は2023年7月現在未対応です。但し、Ignite UI for Blazor バージョン 23.1 以降の場合、「IgbCombo – 双方向データバインディングする方法 」で紹介している方法にて双方向データバインディングを実装することで、C#コード側での選択されている値の追跡と取得が可能となります。）

コード例

ComboComponent.razor

@implements IAsyncDisposable

@inject PrefectureDataService PrefectureDS
@inject IJSRuntime JS

<h3>ComboComponent</h3>

<div>
    <button @onclick="OnClickAsync">コンボの値を取得する</button>
    @ComboValues
</div>

@if (PrefectureData == null)
{
    <div>
        <span>Loading...</span>
    </div>
}
else
{
    <div @ref="ComboContainerRef">
        <IgbCombo Data="PrefectureData"
                  DisplayKey="@nameof(Prefecture.PrefectureName)"
                  ValueKey="@nameof(Prefecture.PrefectureCode)"/>
    </div>
}

@code {
    private IJSObjectReference? JSModule;
    private object[]? PrefectureData = null;
    private ElementReference? ComboContainerRef;
    private String ComboValues = "";

    protected override async Task OnInitializedAsync()
    {
        this.PrefectureData = await PrefectureDS.GetPrefectures();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            this.JSModule ??= await this.JS.InvokeAsync<IJSObjectReference>("import", "./Components/ComboComponent.razor.js");
        }
    }

    private async Task OnClickAsync()
    {
        if(this.JSModule != null)
        {
            this.ComboValues = await this.JSModule.InvokeAsync<string>("getComboValuesScript", this.ComboContainerRef);
        }
    }

    async ValueTask IAsyncDisposable.DisposeAsync()
    {
        if (JSModule is not null)
        {
            await JSModule.DisposeAsync();
        }
    }
}

ComboComponent.razor.js

export const getComboValuesScript = async (containerElement) => {
    const igcCombo = containerElement.querySelector("igc-combo");
    return igcCombo.value;
}

実行結果

サンプル