Class IgxComboComponent

編集可能な機能を提供するドロップダウン リストを表します。ユーザーは定義済みのリストからオプションを選択できます。

IgxComboModule

igx-combo-theme

combobox, combo selection

グリッド & リスト

項目をフィルターする機能、および提供されたデータで単一または複数の選択を実行する機能を提供します。 また、キーボード ナビゲーションおよびカスタム スタイル設定機能を公開します。

<igx-combo [itemsMaxHeight]="250" [data]="locationData"
[displayKey]="'field'" [valueKey]="'field'"
placeholder="Location(s)" searchPlaceholder="Search...">
</igx-combo>

階層

Hierarchy

  • IgxComboBaseDirective
    • IgxComboComponent

実装

  • AfterViewInit
  • ControlValueAccessor
  • OnInit
  • OnDestroy
  • DoCheck
  • EditorProvider

コンストラクター

プロパティ

addItemTemplate: TemplateRef<any> = null

カスタム テンプレートがある場合は、コンボ ドロップダウンの ADD BUTTON の描画に使用されます。

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.addItemTemplate = myCustomTemplate;
<!-- Set in markup -->
<igx-combo #combo>
...
<ng-template igxComboAddItem>
<button type="button" igxButton="contained" class="combo__add-button">
Click to add item
</button>
</ng-template>
</igx-combo>
addition: EventEmitter<IComboItemAdditionEvent> = ...

項目がデータ コレクションに追加されているときに発生されます。

<igx-combo (addition)='handleAdditionEvent($event)'></igx-combo>
allowCustomValues: boolean = false

カスタム値をコレクションに追加できるかどうかを制御します。

// get
let comboAllowsCustomValues = this.combo.allowCustomValues;
<!--set-->
<igx-combo [allowCustomValues]='true'></igx-combo>
ariaLabelledBy: string

aria-labelledby 属性値を設定します。

<igx-combo [ariaLabelledBy]="'label1'">
autoFocusSearch: boolean = true

ドロップダウンを開いた後にコンボの検索ボックスにフォーカスするかどうか。 false の場合、代わりにコンボのリスト項目コンテナーがフォーカスされます。

clearIconTemplate: TemplateRef<any> = null

カスタム テンプレートがある場合は、コンボ CLEAR ボタンを描画するために使用されます。

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.clearIconTemplate = myCustomTemplate;
<!-- Set in markup -->
<igx-combo #combo>
...
<ng-template igxComboClearIcon>
<igx-icon>clear</igx-icon>
</ng-template>
</igx-combo>
closed: EventEmitter<IBaseEventArgs> = ...

ドロップダウンが閉じた後に発生されます。

<igx-combo (closed)='handleClosed($event)'></igx-combo>
closing: EventEmitter<IBaseCancelableBrowserEventArgs> = ...

ドロップダウンが閉じられる前に発生されます。

<igx-combo (closing)='handleClosing($event)'></igx-combo>
dataPreLoad: EventEmitter<IForOfState> = ...

新しいデータの塊が仮想化から読み込まれたときに発生されます。

<igx-combo (dataPreLoad)='handleDataPreloadEvent($event)'></igx-combo>
disabled: boolean = false

コンボを無効にします。デフォルトは false です。

<igx-combo [disabled]="'true'">
document: Document
emptyTemplate: TemplateRef<any> = null

カスタム テンプレートがある場合は、コンボ ドロップダウンの ADD BUTTON の描画に使用されます。

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.emptyTemplate = myCustomTemplate;
<!-- Set in markup -->
<igx-combo #combo>
...
<ng-template igxComboEmpty>
<div class="combo--empty">
There are no items to display
</div>
</ng-template>
</igx-combo>
filterFunction: ((collection: any[], searchValue: any, filteringOptions: IComboFilteringOptions) => any[])

コンボのカスタム フィルタリング機能を取得または設定します。

 <igx-comb #combo [data]="localData" [filterFunction]="filterFunction"></igx-combo>

Type declaration

    • (collection, searchValue, filteringOptions): any[]
    • パラメーター

      返却 any[]

footerTemplate: TemplateRef<any> = null

カスタム テンプレートがある場合は、コンボ項目リストのための FOOTER の描画に使用されます。

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.footerTemplate = myCustomTemplate;
<!-- Set in markup -->
<igx-combo #combo>
...
<ng-template igxComboFooter>
<div class="combo__footer">
This is a custom footer
</div>
</ng-template>
</igx-combo>
headerItemTemplate: TemplateRef<any> = null

カスタム テンプレートがある場合は、コンボ リスト内のグループのため HEADER ITEMS の描画に使用されます。

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.headerItemTemplate = myCustomTemplate;
<!-- Set in markup -->
<igx-combo #combo>
...
<ng-template igxComboHeaderItem let-item let-key="groupKey">
<div class="custom-item--group">Group header for {{ item[key] }}</div>
</ng-template>
</igx-combo>
headerTemplate: TemplateRef<any> = null

カスタム テンプレートがある場合は、コンボ項目リストのための HEADER の描画に使用されます。

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.headerTemplate = myCustomTemplate;
<!-- Set in markup -->
<igx-combo #combo>
...
<ng-template igxComboHeader>
<div class="combo__header">
This is a custom header
</div>
</ng-template>
</igx-combo>
itemTemplate: TemplateRef<any> = null

カスタム テンプレートがある場合は、コンボ リストの ITEMS の描画に使用されます。

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.itemTemplate = myCustomTemplate;
<!-- Set in markup -->
<igx-combo #combo>
...
<ng-template igxComboItem let-item let-key="valueKey">
<div class="custom-item">
<div class="custom-item__name">{{ item[key] }}</div>
<div class="custom-item__cost">{{ item.cost }}</div>
</div>
</ng-template>
</igx-combo>
itemsWidth: string

ドロップダウン リストの幅を構成します。

// get
let myComboItemsWidth = this.combo.itemsWidth;
<!--set-->
<igx-combo [itemsWidth] = '"180px"'></igx-combo>
opened: EventEmitter<IBaseEventArgs> = ...

ドロップダウンが開かれた後に発生されます。

<igx-combo (opened)='handleOpened($event)'></igx-combo>
opening: EventEmitter<IBaseCancelableBrowserEventArgs> = ...

ドロップダウンが開かれる前に発生されます。

<igx-combo opening='handleOpening($event)'></igx-combo>
overlaySettings: OverlaySettings = null

コンボの項目リストの表示方法を制御するカスタム オーバーレイ設定を設定します。 設定:

<igx-combo [overlaySettings]="customOverlaySettings"></igx-combo>
 const customSettings = { positionStrategy: { settings: { target: myTarget } } };
combo.overlaySettings = customSettings;

コンボで使用されるカスタム オーバーレイ設定を取得します。

 const comboOverlaySettings: OverlaySettings = myCombo.overlaySettings;
placeholder: string

コンボの値フィールドのプレースホルダー値を定義します。

// get
let myComboPlaceholder = this.combo.placeholder;
<!--set-->
<igx-combo [placeholder]='newPlaceHolder'></igx-combo>
searchInputUpdate: EventEmitter<IComboSearchInputEventArgs> = ...

検索入力の値が変更 (入力、貼り付け、クリアなど) するときに発生されます。

<igx-combo (searchInputUpdate)='handleSearchInputEvent($event)'></igx-combo>
searchPlaceholder: string = 'Enter a Search Term'

コンボ ドロップダウンの検索フィールドのプレースホルダー値を定義します。

// get
let myComboSearchPlaceholder = this.combo.searchPlaceholder;
<!--set-->
<igx-combo [searchPlaceholder]='newPlaceHolder'></igx-combo>
selectionChanging: EventEmitter<IComboSelectionChangingEventArgs> = ...

選択を完了する前に項目選択が変更されるときに発生されます。

<igx-combo (selectionChanging)='handleSelection()'></igx-combo>
showSearchCaseIcon: boolean = false

caseSensitive アイコンを検索入力に表示するかどうかを定義します。

// get
let myComboShowSearchCaseIcon = this.combo.showSearchCaseIcon;
<!--set-->
<igx-combo [showSearchCaseIcon]='true'></igx-combo>
toggleIconTemplate: TemplateRef<any> = null

カスタム テンプレートがある場合は、コンボ TOGGLE (開く/閉じる) ボタンを描画するために使用されます。

// Set in typescript
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.toggleIconTemplate = myCustomTemplate;
<!-- Set in markup -->
<igx-combo #combo>
...
<ng-template igxComboToggleIcon let-collapsed>
<igx-icon>{{ collapsed ? 'remove_circle' : 'remove_circle_outline'}}</igx-icon>
</ng-template>
</igx-combo>
valueKey: string = null

値を決定するためにデータ ソースのどの列を使用するかを決定します。

// get
let myComboValueKey = this.combo.valueKey;
<!--set-->
<igx-combo [valueKey]='myKey'></igx-combo>
width: string

要素のスタイルの幅を設定します。

// get
let myComboWidth = this.combo.width;
<!--set-->
<igx-combo [width]='250px'></igx-combo>

アクセサー

  • get displayKey(): string
  • 表示値を決定するためにデータ ソースのどの列を使用するかを決定します。

    // get
    let myComboDisplayKey = this.combo.displayKey;

    // set
    this.combo.displayKey = 'val';
    <!--set-->
    <igx-combo [displayKey]='myDisplayKey'></igx-combo>

    返却 string

  • set displayKey(val): void
  • パラメーター

    • val: string

    返却 void

  • get groupKey(): string
  • 項目リストで項目をグループ化する項目プロパティです。データが Object[] 型ではない場合に利用できません。

    // get
    let currentGroupKey = this.combo.groupKey;

    返却 string

  • set groupKey(val): void
  • 項目リストで項目をグループ化する項目プロパティです。データが Object[] 型ではない場合に利用できません。

    <!--set-->
    <igx-combo [groupKey]='newGroupKey'></igx-combo>

    パラメーター

    • val: string

    返却 void

  • get totalItemCount(): number
  • リモート サービスを使用する場合、仮想データ項目の合計数を取得します。

    // get
    let count = this.combo.totalItemCount;

    返却 number

  • set totalItemCount(count): void
  • リモート サービスを使用する場合、仮想データ項目の合計数を設定します。

    // set
    this.combo.totalItemCount(remoteService.count);

    パラメーター

    • count: number

    返却 void

メソッド

  • 定義済みの項目の選択を解除します。

    パラメーター

    • items: any[]

      選択解除される項目。

      this.combo.deselect(["New York", "New Jersey"]);
      
    • event: Event

    返却 void

  • フィルター済みのすべての項目の選択を解除します。

    パラメーター

    • ignoreFilter: boolean

      True に設定されている場合、すべての項目の選択を解除します。そうでない場合、フィルターのみの項目を選択解除します。

      this.combo.deselectAllItems();
      
    • event: Event

    返却 void

  • デフォルトの変更検出がコンポーネントのビューの変更チェック サイクルを 1 回完了した直後に呼び出されるコールバック メソッド。

    返却 void

  • 定義済みの項目を選択します。

    パラメーター

    • newItems: any[]

      選択される新しい項目。

    • clearCurrentSelection: boolean

      True の場合、前回選択した項目がクリアされます。

      this.combo.select(["New York", "New Jersey"]);
      
    • event: Event

    返却 void

  • すべての項目 (フィルター済み) を選択します。

    パラメーター

    • ignoreFilter: boolean

      True に設定されている場合、すべての項目を設定します。そうでない場合、フィルターのみの項目を選択します。

      this.combo.selectAllItems();
      
    • event: Event

    返却 void

  • 1 つの項目を選択/選択解除します。

    パラメーター

    • itemID: any

      指定される項目の itemid です。

    • select: boolean = true

      項目が選択されるか (true) または選択解除されるか (false)。

      指定された valueKey なし

      this.combo.valueKey = null;
      const items: { field: string, region: string}[] = data;
      this.combo.setSelectedItem(items[0], true);

      指定された valueKey を使用

      this.combo.valueKey = 'field';
      const items: { field: string, region: string}[] = data;
      this.combo.setSelectedItem('Connecticut', true);
    • event: Event

    返却 void