クラス IgxForOfDirective<T>

型パラメーター

  • T

階層

実装

  • OnInit
  • OnChanges
  • DoCheck
  • OnDestroy
  • AfterViewInit

コンストラクタ

constructor

  • new IgxForOfDirective(_viewContainer: ViewContainerRef, _template: TemplateRef<NgForOfContext<T>>, _differs: IterableDiffers, resolver: ComponentFactoryResolver, cdr: ChangeDetectorRef, _zone: NgZone): IgxForOfDirective

プロパティ

cdr

cdr: ChangeDetectorRef

igxForContainerSize

igxForContainerSize: any

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

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

igxForItemSize

igxForItemSize: any

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

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

igxForOf

igxForOf: any[]

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

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

igxForScrollContainer

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

igxForScrollOrientation: string

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

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

igxForSizePropName

igxForSizePropName: any

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

onBeforeViewDestroyed

onBeforeViewDestroyed: EventEmitter<EmbeddedViewRef<any>> = new EventEmitter<EmbeddedViewRef<any>>()

onChunkLoad

onChunkLoad: EventEmitter<IForOfState> = new EventEmitter<IForOfState>()

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

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

onChunkPreload

onChunkPreload: EventEmitter<IForOfState> = new EventEmitter<IForOfState>()

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

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

onContentSizeChange

onContentSizeChange: EventEmitter<any> = new EventEmitter<any>()

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

onDataChanged

onDataChanged: EventEmitter<any> = new EventEmitter<any>()

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

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

totalItemCount

totalItemCount: number = null

リモート サービスを使用する場合、仮想データ項目の合計数。

this.parentVirtDir.totalItemCount = data.Count;

アクセサー

displayContainer

  • get displayContainer(): HTMLElement | undefined

igxForTrackBy

  • 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

virtualHelper

  • get virtualHelper(): any

メソッド

addScrollTop

  • addScrollTop(addTop: number): boolean
  • スクロールのつまみ位置を移動します。

    this.parentVirtDir.addScrollTop(5);

    パラメーター

    • addTop: number

      負数はスクロール アップ、正数はスクロール ダウンします。

    返却 boolean

getHorizontalScroll

  • getHorizontalScroll(): any

getItemCountInView

  • getItemCountInView(): number

getScrollForIndex

  • getScrollForIndex(index: number, bottom?: boolean): number
  • 指定したインデックスの要素のスクロール オフセットを返します。

    this.parentVirtDir.getScrollForIndex(1);

    パラメーター

    • index: number
    • オプション bottom: boolean

    返却 number

getSizeAt

  • getSizeAt(index: number): number

getVerticalScroll

  • getVerticalScroll(): any

isScrollable

  • isScrollable(): boolean

ngAfterViewInit

  • ngAfterViewInit(): void

scrollNext

  • scrollNext(): void
  • 「次」の方向に 1 項目スクロールします。 "horizontal" 方向で右列です。"vertical" 方向の下の行です。

    this.parentVirtDir.scrollNext();

    返却 void

scrollNextPage

  • scrollNextPage(): void
  • 「次」の方向に 1 ページ スクロールします。 "horizontal" 方向に右へ 1 ビューです。"vertical" 方向に下へ 1 ビューです。

    this.parentVirtDir.scrollNextPage();

    返却 void

scrollPrev

  • scrollPrev(): void
  • 「前」の方向に 1 項目スクロールします。 "horizontal" 方向で左列です。"vertical" 方向の上の行です。

    this.parentVirtDir.scrollPrev();

    返却 void

scrollPrevPage

  • scrollPrevPage(): void
  • 「前」の方向に 1 ページ スクロールします。 "horizontal" 方向に左へ 1 ビューです。"vertical" 方向に上へ 1 ビューです。

    this.parentVirtDir.scrollPrevPage();

    返却 void

scrollTo

  • scrollTo(index: any): void

verticalScrollHandler

  • verticalScrollHandler(event: any): void

Object literals

state

state: object

The current state of the directive. It contains startIndex and chunkSize. state.startIndex - The index of the item at which the current visible chunk begins. state.chunkSize - The number of items the current visible chunk holds. These options can be used when implementing remote virtualization as they provide the necessary state information.

const gridState = this.parentVirtDir.state;

chunkSize

chunkSize: number = 0

startIndex

startIndex: number = 0