Angular Grid Lite データ バインディング

Grid Lite は、データ ソースとしてプレーン オブジェクトの配列を受け入れます。各グリッド行は配列内のデータ レコードをレンダリングしたもので、行のセルは列の設定に基づいて制御されます。

データの変換 (ソートやフィルターなど) を適用する場合、グリッドは元のデータ参照を変更しません。つまり、データ変換は元のソースには反映されません。グリッドはデータ配列内のオブジェクトの変更を追跡しないため、データ オブジェクトを直接変更しても反映されません。

実行時にデータ ソースを変更する

コンポーネントは実行時にデータ ソースの変更をサポートします。新しいソースが前のものと異なる「形状」を持つ場合、列の設定も更新する必要があります。

grid.data = [...{
  /** レコードが続きます */
}];

<igx-grid-lite>
    <!-- 新しいデータを表すために、必要に応じて列の構成を更新し、列を追加または削除します。 -->
    <igx-grid-lite-column field="id"></igx-grid-lite-column>
</igx-grid-lite>

グリッドで autoGenerate が有効になっている場合、データが変更されると新しい列の構成が自動的に「推測されます」。

grid.autoGenerate = true;

/** 新しいバインディング後、グリッドはバインドされたデータから列コレクションを推論します。 */
grid.data = [];

または、グリッドで @ViewChild を使用する代わりに、html でそれぞれのプロパティを設定します。

  <igx-grid-lite
    [autoGenerate]="true"
    [data]="data">
  </igx-grid-lite>

Note

Grid Lite のソート/フィルター状態は、この方法でデータ ソースを変更しても保持されます。通常は clearSort() または clearFilter() を呼び出してリセットすることをお勧めします。

以下のサンプルでは、グリッドに列の自動生成が有効になっています。データ切り替えボタンをクリックすると、列コレクションがリセットされ、新しいデータ ソースがグリッドにバインドされます。

その他のリソース

• 列の構成
• ソート
• フィルタリング
• テーマ設定とスタイル設定

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

• Grid Lite GitHub