クラス IgxForOfDirective<T>

  • T

階層

実装

  • OnInit
  • OnChanges
  • DoCheck
  • OnDestroy
  • AfterViewInit

Index

コンストラクタ

  • new IgxForOfDirective<T>(_viewContainer: ViewContainerRef, _template: TemplateRef<NgForOfContext<T, NgIterable<T>>>, _differs: IterableDiffers, cdr: ChangeDetectorRef, _zone: NgZone, syncScrollService: IgxForOfScrollSyncService, platformUtil: PlatformUtil, document: any): IgxForOfDirective<T>

プロパティ

beforeViewDestroyed: EventEmitter<EmbeddedViewRef<any>> = ...
cdr: ChangeDetectorRef
chunkLoad: EventEmitter<IForOfState> = ...

新しいチャンクが読み込んだ後に発生するイベント。

<ng-template igxFor [igxForOf]="data" [igxForScrollOrientation]="'horizontal'" (chunkLoad)="loadChunk($event)"></ng-template>
loadChunk(e){
alert("chunk loaded!");
}
chunkPreload: EventEmitter<IForOfState> = ...

startIndex、endIndex、totalCount の現在の状態情報を出力するためにチャンクの読み込みで発生されるイベント。 igxFor データのリモートのロードオンデマンドを実装するために使用できます。

<ng-template igxFor [igxForOf]="data" [igxForScrollOrientation]="'horizontal'" (chunkPreload)="chunkPreload($event)"></ng-template>
chunkPreload(e){
alert("chunk is loading!");
}
contentSizeChange: EventEmitter<any> = ...

igxForOf のレンダリングされたコンテンツのサイズが変更された後に発行されるイベント。

dataChanged: EventEmitter<any> = ...

データが編集された後に発生するイベント。

<ng-template igxFor [igxForOf]="data" [igxForScrollOrientation]="'horizontal'" (dataChanged)="dataChanged($event)"></ng-template>
dataChanged(e){
alert("data changed!");
}
igxForContainerSize: any

スクロールする軸でコンテナーの px 単位のサイズを設定する @Input プロパティ。 "horizontal" 方向の場合、この値はコンテナーの幅で、"vertical" 方向の場合、値はコンテナーの高さです。

<ng-template igxFor let-item [igxForOf]="data" [igxForContainerSize]="'500px'"
[igxForScrollOrientation]="'horizontal'">
</ng-template>
igxForItemSize: any

スクロールする軸で項目の px 単位のサイズを設定する @Input プロパティ。 "horizontal" 方向の場合、この値は列の幅で、"vertical" 方向の場合、値は行の高さです。

<ng-template igxFor let-item [igxForOf]="data" [igxForScrollOrientation]="'horizontal'" [igxForItemSize]="'50px'"></ng-template>
igxForOf: any[]

描画するデータを設定する @Input プロパティ。

<ng-template igxFor let-item [igxForOf]="data" [igxForScrollOrientation]="'horizontal'"></ng-template>
igxForScrollContainer: any

水平と垂直の両方向にスクロールする仮想テンプレートを作成するために親 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>
igxForScrollOrientation: string = 'vertical'

スクロール方向を指定する @Input プロパティ。 スクロール方向を "vertical" または "horizontal" に設定できます。

<ng-template igxFor let-item [igxForOf]="data" [igxForScrollOrientation]="'horizontal'"></ng-template>
igxForSizePropName: any

データ オブジェクトのサイズを読み込むためのプロパティ名を設定する @Input プロパティ。

state: IForOfState = ...

ディレクティブの現在の状態。startIndexchunkSize を含みます。 state.startIndex - 現在の表示チャンクが開始する項目のインデックス。 state.chunkSize - 現在表示されているチャンクが保持する項目数。 これらのオプションは、必要な状態情報が提供されるため、リモート仮想化を実装する際に使用できます。

const gridState = this.parentVirtDir.state;

アクセサー

  • get displayContainer(): HTMLElement
  • get igxForTotalItemCount(): number
  • set igxForTotalItemCount(value: number): void
  • リモート サービスを使用する場合、仮想データ項目の合計数。 totalItemCount プロパティ同様ですが、これによりデータ カウントをテンプレートに設定できます。

    <ng-template igxFor let-item [igxForOf]="data | async" [igxForTotalItemCount]="count | async"
    [igxForContainerSize]="'500px'" [igxForItemSize]="'50px'"></ng-template>

    返却 number

  • リモート サービスを使用する場合、仮想データ項目の合計数。 totalItemCount プロパティ同様ですが、これによりデータ カウントをテンプレートに設定できます。

    <ng-template igxFor let-item [igxForOf]="data | async" [igxForTotalItemCount]="count | async"
    [igxForContainerSize]="'500px'" [igxForItemSize]="'50px'"></ng-template>

    パラメーター

    • value: number

    返却 void

  • get igxForTrackBy(): TrackByFunction<T>
  • set igxForTrackBy(fn: TrackByFunction<T>): void
  • 項目コレクションで変更をトラックするために使用される関数を取得します。 デフォルトでオブジェクト参照が比較されます。 オブジェクト参照の代わりに比較で使用可能な一意の識別子値があるか、変更のためにトラックする項目オブジェクトにその他のプロパティ値がある場合、これを最適化できます。

    このオプションは ngForTrackBy と同様です。

    const trackFunc = this.parentVirtDir.igxForTrackBy;
    

    返却 TrackByFunction<T>

  • 項目コレクションで変更をトラックするために使用される関数を設定します。 この関数は、コレクションの項目の変更のトラッキングを最適化、またはカスタマイズする場合に設定できます。

    igxForTrackBy 関数はインデックスおよび現在の項目を引数として受け、この項目の一意の識別子を返します。

    this.parentVirtDir.igxForTrackBy = (index, item) => {
    return item.id + item.width;
    };

    パラメーター

    • fn: TrackByFunction<T>

    返却 void

  • get scrollPosition(): number
  • set scrollPosition(val: number): void
  • get totalItemCount(): number
  • set totalItemCount(val: number): void
  • get virtualHelper(): HTMLElement

メソッド

  • addScrollTop(addTop: number): boolean
  • getIndexAtScroll(scrollOffset: number): number
  • getItemCountInView(): number
  • getScroll(): HTMLElement
  • getScrollForIndex(index: number, bottom?: boolean): number
  • getSizeAt(index: number): number
  • isIndexOutsideView(index: number): boolean
  • isScrollable(): boolean
  • ngAfterViewInit(): void
  • scrollNext(): void
  • scrollNextPage(): void
  • scrollPrev(): void
  • scrollPrevPage(): void
  • scrollTo(index: any): void
  • verticalScrollHandler(event: any): void