Ignite UI for Angular 10.1.3バージョン時点での情報に基づいています。
Ignite UI for Angular 10.1.xで、子階層のデータをそのままパス形式で列にバインドすることができるようになりました。
例えば、以下のような階層構造のあるデータをフラットな形でグリッドに表示したいとします。
データ構造
this.data = [
{
Code: "13000", Prefecture: "東京都",
Population: { Total: 13515271, Men: 6666690, Female: 6848581 }
},
{
Code: "14000", Prefecture: "神奈川県",
Population: { Total: 9126214, Men: 4558978, Female: 4567236 }
},
{
Code: "11000", Prefecture: "埼玉県",
Population: { Total: 7266534, Men: 3628418, Female: 3638116 }
},
{
Code: "12000", Prefecture: "千葉県",
Population: { Total: 4621965, Men: 2303871, Female: 2318094 }
},
]
実現イメージ
このような場合、グリッドの列へのバインドで、プロパティパスの記述方法が可能になりました。
<igx-grid #grid1 [data]="data" height="400px" width="100%" [autoGenerate]="false"> <igx-column field="Code" header="地域コード"> </igx-column> <igx-column field="Prefecture" header="都道府県名"> </igx-column> <igx-column field="Population.Total" header="人口(総数)" dataType="number"> </igx-column> <igx-column field="Population.Men" header="人口(男)" dataType="number"> </igx-column> <igx-column field="Population.Female" header="人口(女)" dataType="number"> </igx-column> </igx-grid>
サンプル
ヘルプドキュメント
- 「データグリッド」→「複雑なデータ バインディング」
