伊藤  直子

伊藤 直子

1652139480

AngularJSで無限スクロールを使用してリストをレンダリングする

DOMでアイテムの長いリストをレンダリングするためのより優れた動的な方法

大量のデータを処理する場合、そのデータをDOMで処理することは、効率とパフォーマンスの向上という点で常に課題です。
そのデータをDOMに読み込もうとすると、データのサイズでDOMにノードが作成され、データの長いリストでDOMとページが肥大化し始めます。

例-

 if data is an array [] with length 100<div class="example-viewport">
        <div *ngFor="let item of data" class="list">
          <h2>{{item.name}}</h2>
        </div>
      </div>As data [] has length 100, it will create 100 nodes in DOM. 

問題 -

上記の例では、長さ100のデータを取得しました。データが多いと、DOMでより多くのノードが作成され、データサイズが大きくなると、アプリケーションの速度が低下し、DOMとページが肥大化し始めます。

解決

Angular(7+)を使用すると、Material Component Development Kit(CDK)の新しい仮想スクロール動作にアクセスできます。ビューポートに表示されている場合にのみ要素をレンダリングするデータをループするためのツールを提供し、DOMでアイテムの長いリストを効率的にレンダリングするためのより優れた動的な方法を提供します。

コンポーネント開発キット(CDK)-
一般的な動作を実装するツールのセットです。これはAngular Material Libraryの一種の抽象化であり、マテリアルデザインに固有のスタイルはありません。

無限の仮想スクロールを実装しましょう

前提条件— Angular(バージョン7または7以降)、ノードバージョン11.0以降

ステップ-1-@angle/cdkパッケージを追加します

npm install @angular/cdk

ステップ-2ScrollingModuleをモジュールにインポートします

import { ScrollingModule} from '@angular/cdk/scrolling';
imports: [
  ...,
ScrollingModule
]

ステップ-3コンポーネントの内部

Wrap your looping element inside <cdk-virtual-scroll-viewport>
</cdk-virtual-scroll-viewport>use  *cdkVirtualFor instead of *Ngfor itemSize directive tells how tall(height of height) each item will be(in pixels). So, itemSize="100" means that item in the list will require 100px of height.<cdk-virtual-scroll-viewport itemSize="100">
  <li *cdkVirtualFor="let item of data">
      <!-- Print item here -->
  </li>
</cdk-virtual-scroll-viewport>

おめでとうございます。これで、基本的な無限仮想スクロールが完了しました。これにより、ページのパフォーマンスとデータの読み込みエクスペリエンスが向上します。

cdk-virtual-scrollの高度な機能を備えたボーナス情報

カスタムイベント—特定のアイテムがスクロールされたときにイベントをリッスンします

<cdk-virtual-scroll-viewport itemSize="100" (scrolledIndexChange)="scrollhandler($event)">
  </cdk-virtual-scroll-viewport>

CdkVirtualScrollViewportとそのメソッドへのアクセス

import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';@ViewChild(CdkVirtualScrollViewport)
  viewport: CdkVirtualScrollViewport;Access methods like
 this.viewport.scrollToIndex(23)

* cdkVirtualForは、テンプレートにいくつかの論理変数を提供します

<cdk-virtual-scroll-viewport itemSize="100">
  <li *cdkVirtualFor="let item of data; let index = index;
                       let count = count;
                       let first = first;
                       let last = last;
                       let even = even;
                       let odd = odd;">
      <!-- Print item here -->
  </li>
</cdk-virtual-scroll-viewport>

幸せな学習…👏👏👏

ソース:https ://hackernoon.com/render-lists-using-infinite-scroll-in-angularjs

#angularjs 

What is GEEK

Buddha Community

AngularJSで無限スクロールを使用してリストをレンダリングする
伊藤  直子

伊藤 直子

1652139480

AngularJSで無限スクロールを使用してリストをレンダリングする

DOMでアイテムの長いリストをレンダリングするためのより優れた動的な方法

大量のデータを処理する場合、そのデータをDOMで処理することは、効率とパフォーマンスの向上という点で常に課題です。
そのデータをDOMに読み込もうとすると、データのサイズでDOMにノードが作成され、データの長いリストでDOMとページが肥大化し始めます。

例-

 if data is an array [] with length 100<div class="example-viewport">
        <div *ngFor="let item of data" class="list">
          <h2>{{item.name}}</h2>
        </div>
      </div>As data [] has length 100, it will create 100 nodes in DOM. 

問題 -

上記の例では、長さ100のデータを取得しました。データが多いと、DOMでより多くのノードが作成され、データサイズが大きくなると、アプリケーションの速度が低下し、DOMとページが肥大化し始めます。

解決

Angular(7+)を使用すると、Material Component Development Kit(CDK)の新しい仮想スクロール動作にアクセスできます。ビューポートに表示されている場合にのみ要素をレンダリングするデータをループするためのツールを提供し、DOMでアイテムの長いリストを効率的にレンダリングするためのより優れた動的な方法を提供します。

コンポーネント開発キット(CDK)-
一般的な動作を実装するツールのセットです。これはAngular Material Libraryの一種の抽象化であり、マテリアルデザインに固有のスタイルはありません。

無限の仮想スクロールを実装しましょう

前提条件— Angular(バージョン7または7以降)、ノードバージョン11.0以降

ステップ-1-@angle/cdkパッケージを追加します

npm install @angular/cdk

ステップ-2ScrollingModuleをモジュールにインポートします

import { ScrollingModule} from '@angular/cdk/scrolling';
imports: [
  ...,
ScrollingModule
]

ステップ-3コンポーネントの内部

Wrap your looping element inside <cdk-virtual-scroll-viewport>
</cdk-virtual-scroll-viewport>use  *cdkVirtualFor instead of *Ngfor itemSize directive tells how tall(height of height) each item will be(in pixels). So, itemSize="100" means that item in the list will require 100px of height.<cdk-virtual-scroll-viewport itemSize="100">
  <li *cdkVirtualFor="let item of data">
      <!-- Print item here -->
  </li>
</cdk-virtual-scroll-viewport>

おめでとうございます。これで、基本的な無限仮想スクロールが完了しました。これにより、ページのパフォーマンスとデータの読み込みエクスペリエンスが向上します。

cdk-virtual-scrollの高度な機能を備えたボーナス情報

カスタムイベント—特定のアイテムがスクロールされたときにイベントをリッスンします

<cdk-virtual-scroll-viewport itemSize="100" (scrolledIndexChange)="scrollhandler($event)">
  </cdk-virtual-scroll-viewport>

CdkVirtualScrollViewportとそのメソッドへのアクセス

import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';@ViewChild(CdkVirtualScrollViewport)
  viewport: CdkVirtualScrollViewport;Access methods like
 this.viewport.scrollToIndex(23)

* cdkVirtualForは、テンプレートにいくつかの論理変数を提供します

<cdk-virtual-scroll-viewport itemSize="100">
  <li *cdkVirtualFor="let item of data; let index = index;
                       let count = count;
                       let first = first;
                       let last = last;
                       let even = even;
                       let odd = odd;">
      <!-- Print item here -->
  </li>
</cdk-virtual-scroll-viewport>

幸せな学習…👏👏👏

ソース:https ://hackernoon.com/render-lists-using-infinite-scroll-in-angularjs

#angularjs