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

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

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

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

    使用方法

    ComboBox コンポーネントを初期化にするには、まず IgxComboModule を app.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>

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

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

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

    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 まとめ

    その他のリソース

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