startIndex、endIndex、totalCount の現在の状態情報を出力するためにチャンクの読み込みで発生されるイベント。 igxFor データのリモートのロードオンデマンドを実装するために使用できます。
<ng-template igxFor [igxForOf]="data" [igxForScrollOrientation]="'horizontal'" (chunkPreload)="chunkPreload($event)"></ng-template>
chunkPreload(e){
alert("chunk is loading!");
}
igxForOf のレンダリングされたコンテンツのサイズが変更された後に発行されるイベント。
データが編集された後に発生するイベント。
<ng-template igxFor [igxForOf]="data" [igxForScrollOrientation]="'horizontal'" (dataChanged)="dataChanged($event)"></ng-template>
dataChanged(e){
alert("data changed!");
}
スクロールする軸でコンテナの px 単位のサイズを設定する @Input プロパティ。 "horizontal" 方向の場合、この値はコンテナの幅で、"vertical" 方向の場合、値はコンテナの高さです。
<ng-template igxFor let-item [igxForOf]="data" [igxForContainerSize]="'500px'"
[igxForScrollOrientation]="'horizontal'">
</ng-template>
スクロールする軸で項目の px 単位のサイズを設定する @Input プロパティ。 "horizontal" 方向の場合、この値は列の幅で、"vertical" 方向の場合、値は行の高さです。
<ng-template igxFor let-item [igxForOf]="data" [igxForScrollOrientation]="'horizontal'" [igxForItemSize]="'50px'"></ng-template>
描画するデータを設定する @Input プロパティ。
<ng-template igxFor let-item [igxForOf]="data" [igxForScrollOrientation]="'horizontal'"></ng-template>
水平と垂直の両方向にスクロールする仮想テンプレートを作成するために親 igxFor
インスタンスをオプションに渡します。
<ng-template #scrollContainer igxFor let-rowData [igxForOf]="data"
[igxForScrollOrientation]="'vertical'"
[igxForContainerSize]="'500px'"
[igxForItemSize]="'50px'"
let-rowIndex="index">
<div [style.display]="'flex'" [style.height]="'50px'">
<ng-template #childContainer igxFor let-item [igxForOf]="data"
[igxForScrollOrientation]="'horizontal'"
[igxForScrollContainer]="parentVirtDir"
[igxForContainerSize]="'500px'">
<div [style.min-width]="'50px'">{{rowIndex}} : {{item.text}}</div>
</ng-template>
</div>
</ng-template>
スクロール方向を指定する @Input プロパティ。 スクロール方向を "vertical" または "horizontal" に設定できます。
<ng-template igxFor let-item [igxForOf]="data" [igxForScrollOrientation]="'horizontal'"></ng-template>
データ オブジェクトのサイズを読み込むためのプロパティ名を設定する @Input プロパティ。
ディレクティブの現在の状態。startIndex
と chunkSize
を含みます。
state.startIndex - 現在の表示チャンクが開始する項目のインデックス。
state.chunkSize - 現在表示されているチャンクが保持する項目数。
これらのオプションは、必要な状態情報が提供されるため、リモート仮想化を実装する際に使用できます。
const gridState = this.parentVirtDir.state;
リモート サービスを使用する場合、仮想データ項目の合計数。 totalItemCount プロパティ同様ですが、これによりデータ カウントをテンプレートに設定できます。
<ng-template igxFor let-item [igxForOf]="data | async" [igxForTotalItemCount]="count | async"
[igxForContainerSize]="'500px'" [igxForItemSize]="'50px'"></ng-template>
リモート サービスを使用する場合、仮想データ項目の合計数。 totalItemCount プロパティ同様ですが、これによりデータ カウントをテンプレートに設定できます。
<ng-template igxFor let-item [igxForOf]="data | async" [igxForTotalItemCount]="count | async"
[igxForContainerSize]="'500px'" [igxForItemSize]="'50px'"></ng-template>
項目コレクションで変更をトラックするために使用される関数を取得します。 デフォルトでオブジェクト参照が比較されます。 オブジェクト参照の代わりに比較で使用可能な一意の識別子値があるか、変更のためにトラックする項目オブジェクトにその他のプロパティ値がある場合、これを最適化できます。
このオプションは ngForTrackBy と同様です。
const trackFunc = this.parentVirtDir.igxForTrackBy;
項目コレクションで変更をトラックするために使用される関数を設定します。 オブジェクト参照の代わりに比較で使用可能な一意の識別子値があるか、変更のためにトラックする項目オブジェクトにその他のプロパティ値がある場合、これを最適化できます。
igxForTrackBy 関数はインデックスおよび現在の項目を引数として受け、この項目の一意の識別子を返します。
this.parentVirtDir.igxForTrackBy = (index, item) => {
return item.id + item.width;
};
スクロール位置を取得または設定します。
const position = directive.scrollPosition;
directive.scrollPosition = value;
スクロール位置を取得または設定します。
const position = directive.scrollPosition;
directive.scrollPosition = value;
リモート サービスを使用する場合、仮想データ項目の合計数。
this.parentVirtDir.totalItemCount = data.Count;
リモート サービスを使用する場合、仮想データ項目の合計数。
this.parentVirtDir.totalItemCount = data.Count;
スクロールのつまみ位置を移動します。
this.parentVirtDir.addScrollTop(5);
負数はスクロール アップ、正数はスクロール ダウンします。
完全に表示される項目の合計数を返します。
this.parentVirtDir.getItemCountInView();
スクロールバーの DOM 要素への参照を返します。 指定した igxForScrollOrientation に基づいて、垂直または水平のスクロールバーになります。
dir.getScroll();
指定したインデックスの要素のスクロール オフセットを返します。
this.parentVirtDir.getScrollForIndex(1);
指定したインデックスの要素のサイズを返します。
this.parentVirtDir.getSizeAt(1);
「次」の方向に 1 項目スクロールします。 "horizontal" 方向で右列です。"vertical" 方向の下の行です。
this.parentVirtDir.scrollNext();
次の適切な方向に 1 ページ スクロールします。 "horizontal" 方向に右へ 1 ビューです。"vertical" 方向に下へ 1 ビューです。
this.parentVirtDir.scrollNextPage();
「前」の方向に 1 項目スクロールします。 "horizontal" 方向で左列です。"vertical" 方向の上の行です。
this.parentVirtDir.scrollPrev();
「前」の方向に 1 ページ スクロールします。 "horizontal" 方向に左へ 1 ビューです。"vertical" 方向に上へ 1 ビューです。
this.parentVirtDir.scrollPrevPage();
指定されたインデックスへスクロールします。
this.parentVirtDir.scrollTo(5);
新しいチャンクが読み込んだ後に発生するイベント。