ComboBox (コンボボックス) リモート バインディング

    Ignite UI for Angular ComboBox コンポーネントは、コンボボックスをリモート サービスにバインドし、要求に応じてデータを取得できる API を公開します。

    Angular コンボボックス リモート バインディングの例

    以下のサンプルは、dataPreLoad プロパティを使用してリモート データの新しい部分をロードするリモート バインディングを示しています。

    使用方法

    ComboBox コンポーネントを初期化にするには、まず IgxComboModuleapp.module.ts ファイルにインポートします。デモではサーバー要求にリモート サービスを使用しているため、追加で HttpClientModule を含む必要があります。

    import { IgxComboModule } from 'igniteui-angular';
    import { HttpClientModule } from '@angular/common/http';
    
    @NgModule({
        imports: [
            ...
            IgxComboModule,
            HttpClientModule,
            ...
        ]
    })
    export class AppModule {}
    

    リモート サービスの定義

    コンボボックスをリモートデータへバインドする際にサーバーからデータをオンデマンドで読み込むための有効なサービスが必要です。コンボボックス コンポーネントは [virtualizationState]https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/IgxComboComponent.html#virtualizationState) プロパティを公開し、コンボボックスの状態 (最初のインデックスと読み込む必要のある項目数) を提供します。スクロール サイズを正しく表示するには、totalItemCount プロパティにサーバー上の全項目に対応する値が必要です。

    以下のコードは、getData() メソッドでシンプルなサービスを定義し、コンボボックスの状態を受け取り、observable としてデータを返します。

    import { HttpClient } from '@angular/common/http';
    import { Injectable } from '@angular/core';
    import { IForOfState } from 'igniteui-angular';
    import { BehaviorSubject, Observable } from 'rxjs';
    
    @Injectable()
    export class RemoteService {
        public remoteData: Observable<any[]>;
        private _remoteData: BehaviorSubject<any[]>;
    
        constructor(private http: HttpClient) {
            this._remoteData = new BehaviorSubject([]);
            this.remoteData = this._remoteData.asObservable();
        }
    
        // Use combobox current virtualization state and search text to build URL and request the new data.
        public getData(data?: IForOfState, searchText?: string, cb?: (any) => void): any { }
    }
    

    コンボボックスをリモート サービスへバインド

    データがサービスから observable として返されると async パイプを使用してコンボボックス コンポーネントに設定します。

    <igx-combo [data]="rData | async"
               [valueKey]="'ProductID'"
               [displayKey]="'ProductName'"
               (dataPreLoad)="dataLoading($event)"
               (searchInputUpdate)="searchInput($event)"
               (opening)="searchInput('')">
    </igx-combo>
    

    以下は、コンボボックス コンポーネントが新しいデータを要求する必要がある一般的な例です。

    • コンボボックスが初期化されたとき
    • コンボボックスのリストをスクロールしたとき - 新しいコンボボックス virtualizationStatedataPreLoad を発生し、リモート サービスに新しい要求を送ることができます。
    • コンボボックスで検索するとき - リモート結果のフィルターを要求する必要があります。
    • コンボボックスが開いたとき - 以前のフィルター処理の結果をクリアします。

    以下は定義済みの操作をリッスンしてサーバーへ要求するハンドラーです。

    import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
    import { IgxComboComponent } from 'igniteui-angular';
    import { RemoteService } from '../../grid/services/remote.service';
    
    @Component({
        providers: [RemoteService],
        selector: 'app-combo-remote',
        styleUrls: ['./combo-remote.component.scss'],
        templateUrl: './combo-remote.component.html'
    })
    export class ComboRemoteComponent implements OnInit {
    
        public prevRequest: any;
        public rData: any;
        @ViewChild('remoteCombo', { read: IgxComboComponent }) public remoteCombo: IgxComboComponent;
    
        constructor(private remoteService: RemoteService, public cdr: ChangeDetectorRef) { }
    
        public ngOnInit() {
            this.rData = this.remoteService.remoteData;
        }
    
        public ngAfterViewInit() {
            this.remoteService.getData(this.remoteCombo.virtualizationState, null, (data) => {
                this.remoteCombo.totalItemCount = data['@odata.count'];
            });
        }
    
        public dataLoading(evt) {
            if (this.prevRequest) {
                this.prevRequest.unsubscribe();
            }
            this.prevRequest = this.remoteService.getData(
                this.remoteCombo.virtualizationState,
                null,
                (data) => {
                  this.remoteCombo.totalItemCount = data['@odata.count'];
                  this.cdr.detectChanges();
            });
        }
    
        public searchInput(searchText) {
            this.remoteService.getData(this.remoteCombo.virtualizationState, searchText, (data) => {
                this.remoteCombo.totalItemCount = data['@odata.count'];
            });
        }
    }
    
    Note

    新しいデータが読み込まれた際にスクロールバーが適切なサイズになるよう totalItemCount プロパティを更新します。その際サービスは @odata.count プロパティを使用して合計サイズを返します。

    Note

    サービスはプロバイダーとして含む必要があります。

    選択の処理

    より複雑なデータ型 (オブジェクトなど) を扱うチャンクでロードされたリモート データにバインドされたコンボボックスを使用する場合、valueKey を定義する必要があります。コンボボックス トピックで述べたように、valueKey が指定されていない場合、コンボボックスは選択を equality (===) で処理しようとします。選択済みとしてマークされるオブジェクトは、継続的にロードされるオブジェクトと同じではないため、選択は失敗します。

    Note

    コンボボックスをリモートデータにバインドするときは、各項目に固有のプロパティを表す valueKey を指定してください。

    コンボボックスがリモートデータにバインドされている場合、APIを介して値/選択項目を設定すると、現在のチャンクにロードされた項目のみが考慮されます。初期値を設定したい場合は、選択する前にそれらの特定の項目がロードされていることを確認してください。

    API まとめ

    その他のリソース

    コミュニティに参加して新しいアイデアをご提案ください。