クラス IgxSimpleComboComponent

ユーザーが定義済みのリストから単一のオプションを選択できるフィルタリング機能を提供するドロップダウンリストを表します。

igxmodule

IgxSimpleComboModule

igxtheme

igx-combo-theme

igxkeywords

combobox, single combo selection

igxgroup

Grids & Lists

備考:

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

例:
<igx-simple-combo [itemsMaxHeight]="250" [data]="locationData"
[displayKey]="'field'" [valueKey]="'field'"
placeholder="Location" searchPlaceholder="Search...">
</igx-simple-combo>

階層

  • IgxComboBaseDirective
    • IgxSimpleComboComponent

実装

  • ControlValueAccessor
  • AfterViewInit

Index

コンストラクタ

プロパティ

addItemTemplate: TemplateRef<any> = null

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

// Typescript に設定
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.addItemTemplate = myCustomTemplate;
<!-- Markup に設定 -->
<igx-combo #combo>
...
<ng-template igxComboAddItem>
<button 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

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

// 取得
let comboAllowsCustomValues = this.combo.allowCustomValues;
<!--設定-->
<igx-combo [allowCustomValues]='true'></igx-combo>
ariaLabelledBy: string

aria-labelledby 属性を設定する @Input プロパティ。

<igx-combo [ariaLabelledBy]="'label1'">
clearIconTemplate: TemplateRef<any> = null

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

// Typescript に設定
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.clearIconTemplate = myCustomTemplate;
<!-- 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

コンボを有効/無効にする @Input プロパティ。デフォルトは false です。

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

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

// Typescript に設定
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.emptyTemplate = myCustomTemplate;
<!-- Markup に設定 -->
<igx-combo #combo>
...
<ng-template igxComboEmpty>
<div class="combo--empty">
表示する項目はありません
</div>
</ng-template>
</igx-combo>
filterFunction: ((collection: any[], searchValue: any, filteringOptions: IComboFilteringOptions) => any[])

Type declaration

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

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

      パラメーター

      返却 any[]

footerTemplate: TemplateRef<any> = null

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

// Typescript に設定
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.footerTemplate = myCustomTemplate;
<!-- 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 の描画に使用されます。

// Typescript に設定
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.headerItemTemplate = myCustomTemplate;
<!-- 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 の描画に使用されます。

// Typescript に設定
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.headerTemplate = myCustomTemplate;
<!-- Markup に設定 -->
<igx-combo #combo>
...
<ng-template igxComboHeader>
<div class="combo__header">
This is a custom header
</div>
</ng-template>
</igx-combo>
id: string = ...

コンボの id を取得または設定します。

// 取得
let id = this.combo.id;
<!--設定-->
<igx-combo [id]='combo1'></igx-combo>
itemTemplate: TemplateRef<any> = null

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

// Typescript に設定
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.itemTemplate = myCustomTemplate;
<!-- 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

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

// 取得
let myComboItemsWidth = this.combo.itemsWidth;
<!--設定-->
<igx-combo [itemsWidth] = '"180px"'></igx-combo>
onDensityChanged: EventEmitter<IDensityChangedEventArgs> = ...
opened: EventEmitter<IBaseEventArgs> = ...

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

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

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

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

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

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

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

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

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

// 取得
let myComboPlaceholder = this.combo.placeholder;
<!--設定-->
<igx-combo [placeholder]='newPlaceHolder'></igx-combo>
searchInputUpdate: EventEmitter<IComboSearchInputEventArgs> = ...

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

<igx-combo (searchInputUpdate)='handleSearchInputEvent($event)'></igx-combo>
selectionChanging: EventEmitter<ISimpleComboSelectionChangingEventArgs> = ...

選択を完了する前にアイテム選択が変更されるときに発生します。

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

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

// 取得
let myComboShowSearchCaseIcon = this.combo.showSearchCaseIcon;
<!--設定-->
<igx-combo [showSearchCaseIcon]='true'></igx-combo>
toggleIconTemplate: TemplateRef<any> = null

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

// Typescript に設定
const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
myComponent.combo.toggleIconTemplate = myCustomTemplate;
<!-- 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

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

// 取得
let myComboValueKey = this.combo.valueKey;
<!--設定-->
<igx-combo [valueKey]='myKey'></igx-combo>
width: string

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

// 取得
let myComboWidth = this.combo.width;
<!--設定-->
<igx-combo [width]='250px'></igx-combo>

アクセサー

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

    // 取得
    let currentGroupKey = this.combo.groupKey;

    返却 string

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

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

    パラメーター

    • val: string

    返却 void

  • get itemHeight(): number
  • set itemHeight(val: number): void
  • ドロップダウン リスト項目の高さを構成します。

    // 取得
    let myComboItemHeight = this.combo.itemHeight;
    <!--設定-->
    <igx-combo [itemHeight]='32'></igx-combo>

    返却 number

  • ドロップダウン リスト項目の高さを構成します。

    // 取得
    let myComboItemHeight = this.combo.itemHeight;
    <!--設定-->
    <igx-combo [itemHeight]='32'></igx-combo>

    パラメーター

    • val: number

    返却 void

  • get itemsMaxHeight(): number
  • set itemsMaxHeight(val: number): void
  • ドロップダウン リストの高さを構成します。

    // 取得
    let myComboItemsMaxHeight = this.combo.itemsMaxHeight;
    <!--設定-->
    <igx-combo [itemsMaxHeight]='320'></igx-combo>

    返却 number

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

    // 取得
    let myComboItemsMaxHeight = this.combo.itemsMaxHeight;
    <!--設定-->
    <igx-combo [itemsMaxHeight]='320'></igx-combo>

    パラメーター

    • val: number

    返却 void

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

    // 取得
    let count = this.combo.totalItemCount;

    返却 number

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

    // 設定
    this.combo.totalItemCount(remoteService.count);

    パラメーター

    • count: number

    返却 void

  • get valid(): IgxComboState
  • set valid(valid: IgxComboState): void
  • get value(): string

メソッド

  • close(): void
  • deselect(): void
  • open(): void
  • select(item: any): void
  • toggle(): void
  • triggerCheck(): void