Ignite UI for Blazor のコンボボックスコンポーネント IgbCombo について、その Data パラメーターに null を指定すると (下記実装例)、

<div>
  <IgbCombo Data="_items" 
            ValueKey="@nameof(ComboItem.Id)"
            DisplayKey="@nameof(ComboItem.Name)" />
</main>

@code {
  private record ComboItem(int Id, string Name);

  private List<ComboItem>? _items = null;
  ...

以下の JavaScript エラーが発生し、コンボボックスコンポーネントは表示されません。

Uncaught (in promise) TypeError: this.data is not iterable

つきましては、IgbCombo の Data パラメーターには、要素数 = 0 で構いませんので、null ではない集合オブジェクトの実体を渡すようにしてください。

...
@code {
  ...
  // ? 内容は空でいいので、List<T> の実体を渡す
  private List<ComboItem> _items = new();
  ...

なお、このあとでプログラムコードから、選択肢を追加する場合は、IgbCombo の Data に渡している List<T> オブジェクトに要素を追加しても表示に反映されません (下記実装例)。

@code {
  ...
  // 何かボタンのクリックなどでコンボボックスの選択肢を
  // 設定するとして...
  private void OnClickBuildComboItems()
  {
    // ⚠️Data パラメーターに渡している List<T> オブジェクトに
    //   選択肢要素を追加しても、反映されない。
    _items.AddRange(new ComboItem[]
    {
      new(Id: 1, Name: "選択肢1"),
      new(Id: 2, Name: "選択肢2"),
      new(Id: 3, Name: "選択肢3"),
    });
  }
  ...

これは、IgbCombo の Data パラメーターに渡しているオブジェクトが別のオブジェクトに差し替わったわけではないため、IgbCombo は状況の変化に気づけず、その結果として表示に反映されないためです。

代わりに、IgnCombo の Data パラメーターに渡すオブジェクトを、別のオブジェクトに差し替えるように実装してください (下記実装例)。

@code {
  ...
  private void OnClickBuildComboItems()
  {
    // 代わりに新しい List<T> を作り直してそれを Data に渡す
    _items = new List<ComboItem>
    {
      new(Id: 1, Name: "選択肢1"),
      new(Id: 2, Name: "選択肢2"),
      new(Id: 3, Name: "選択肢3"),
    });
  }
  ...
Tagged:

製品について

Ignite UI for Blazor