Angular Grid のライブデータ更新

Grid コンポーネントは、ユーザーの操作に応答し続けている間、1 秒あたり数千の更新を処理できます。

Angular ライブデータ更新の例

以下のサンプルは、すべてのレコードが 1 秒間に複数回更新される場合の Grid のパフォーマンスを示しています。UI コントロールを使用して、読み込むレコードの数と更新の頻度を選択します。同じデータをカテゴリチャートに入力して、Ignite UI forAngular の強力なチャート作成機能を体験してください。Chart ボタンには、選択した行の Category Prices per Region データが表示され、Chart 列ボタンには現在の行の同じデータが表示されます。

データバインディングおよび更新

サービスは、ページが読み込まれたとき、およびスライダーコントローラーを使用して特定の数のレコードを取得したときに、コンポーネントにデータを提供します。実際のシナリオでは、更新されたデータはサービスから消費されますが、ここではデータはコードで更新されます。これは、デモをシンプルに保ち、その主な目標であるグリッドのパフォーマンスを実証するために行われます。

<igx-grid #grid [data]="data"></igx-grid>

public ngOnInit() {
    this.localService.getData(this.volume);
    this.volumeSlider.onValueChange.subscribe(x => this.localService.getData(this.volume);
    this.localService.records.subscribe(x => { this.data = x; });
}

Angular パイプは、グリッドビューを更新するために内部的に使用されます。データフィールド値の変更またはデータオブジェクト/データコレクション参照の変更により、対応するパイプがトリガーされます。ただし、これは複合データオブジェクトにバインドされている列には当てはまりません。これは、Angular の純粋パイプがネストされたプロパティの変更を検出しないためです。この状況を解決するには、プロパティを含むデータオブジェクトの新しいオブジェクト参照を提供します。例:

<igx-grid #grid [data]="data">
    <igx-column field="price.usd"></igx-column>
</igx-grid>

private updateData(data: IRecord[]) {
    const newData = []
    for (const rowData of data) {
        rowData.price = { usd: getUSD(), eur: getEUR() };
        newData.push({...rowData});
    }
    this.grid.data = newData;
}

テンプレート

ビューの更新は、デフォルトテンプレートの列とカスタムテンプレートの列で同じように機能します。ただし、カスタムテンプレートは比較的単純にしておくことをお勧めします。テンプレート内の要素の数が増えると、パフォーマンスへの悪影響も大きくなります。

Dock Manager および igxGrid コンポーネントを使用したライブデータフィード

このデモの目的は、SignalR ハブバックエンドを使用してリアルタイムデータストリームを表示する財務用スクリーンボードを紹介することです。 igxGrid コンポーネントは、サーバーからの高頻度の更新を簡単に処理できます。SignalR を使用する ASP.NET Core アプリケーションのコードは、この公開な GitHub リポジトリにあります。

ハブ接続の開始

signal-r.service は公開された管理可能なパラメーター - frequency、volume および live-update 状態のトグル (開始/停止) - の接続と更新を処理します。

this.hubConnection = new signalR.HubConnectionBuilder()
        .configureLogging(signalR.LogLevel.Trace)
        .withUrl('https://www.infragistics.com/angular-apis/webapi/streamHub')
        .build();
    this.hubConnection
        .start()
        .then(() => {
            this.hasRemoteConnection = true;
            this.registerSignalEvents();
            this.broadcastParams(interval, volume, live, updateAll);
        })
        .catch(() => {});

指定された頻度に基づいて、合計 30 の新しい更新がサーバーによって受信されます。特定の cellStyle クラスは、変更を処理する 3 つの列に適用されます - Price、Change および Change (%)。

更新頻度とデータボリューム

左側のアクションパネルを使用して、データフィードの頻度と要求されたデータボリュームを管理できます。すべてのグリッドは同じデータソースを使用します。 データフィードの停止、アプリケーションテーマの変更、または igxGrid を使用した DockSlot コンテナーの動的追加は、他のアクション要素をご自由にお使いください。

'updateparameters' メソッドを使用して、特定の頻度で新しいデータのセットを要求します。このメソッドは、SignalR ストリームハブの実装の一部です。

this.hubConnection.invoke('updateparameters', frequency, volume, live, updateAll)
    .then(() => console.log('requestLiveData', volume))
    .catch(err => {
        console.error(err);
    });

DockSlot および Grid コンポーネントを動的に作成

ComponentFactoryResolver を使用して、DockSlot および Grid コンポーネントをオンザフライで作成できます。

DockManager コンポーネント

Dock Manager WebComponent を利用し、ドケットまたはフローティングパネルを使用して独自の Web ビューを作成します。新しいフローティングパネルを追加するには、右側のアクションペインを開き、[フローティングペインの追加] ボタンをクリックします。新しいペインを目的の場所にドラッグアンドドロップします。

API リファレンス

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

Angular Grid のライブ データ更新

Angular ライブ データ更新の例

データ バインディングおよび更新