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 まとめ
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。