【Angular/Material】ネストがある配列データをmat-tableで表示させる
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
背景
ネストがある配列データをmat-tableで表示させたので、その備忘録です。
ネストがある配列データをmat-tableで表示
前提条件
データ構成
※見にくくてすみません、、、ニュアンスで分かってもらえると助かりますmm
data = {{
"column": [
0: "Name",
1: "Gender",
2: "Hobby"
],
"person": [
0: { info: {
info1: "loud",
info2: "big"
}
},
{ details: {
Name: "Taro",
Gender: "1",
Hobby: ""
}
},
1: { info: {
info1: "",
info2: ""
}
},
{ details: {
Name: "Taro",
Gender: "1",
Hobby: ""
}
},
]},{
"column": [
・・・・
]
}
}
mat-tableの基本フォーマット
参考資料：
Angular Material UI component library
component.html
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
module.ts
import { MatTableModule } from '@angular/material/table';
・・・
imports: [ ・・・, MatTableModule, ・・・]
・・・
component.ts
import {Component} from '@angular/core';
export interface PeriodicElement {
name: string;
position: number;
weight: number;
}
const ELEMENT_DATA: PeriodicElement = [
{position: 1, name: 'Hydrogen', weight: 1.0079},
{position: 2, name: 'Helium', weight: 4.0026},
{position: 3, name: 'Lithium', weight: 6.941},
{position: 4, name: 'Beryllium', weight: 9.0122},
{position: 5, name: 'Boron', weight: 10.811},
{position: 6, name: 'Carbon', weight: 12.0107},
{position: 7, name: 'Nitrogen', weight: 14.0067},
{position: 8, name: 'Oxygen', weight: 15.9994},
{position: 9, name: 'Fluorine', weight: 18.9984},
{position: 10, name: 'Neon', weight: 20.1797},
];
@Component({
selector: 'table-basic-example',
styleUrls: ['table-basic-example.css'],
templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
displayedColumns: string = ['position', 'name', 'weight'];
dataSource = ELEMENT_DATA;
}
ネストがある配列データの表示
component.html
<table mat-table [dataSource]="getVariationGroup(data)">
<ng-container *ngFor="let column of data['column']">
<ng-container [matColumnDef]="column">
<th mat-header-cell *matHeaderCellDef>{{ column }}</th>
<td mat-cell *matCellDef="let personRow">
<input type='text' [(ngModel)]='personRow[column]'>
</td>
</ng-container>
</ng-container>
<tr mat-header-row *matHeaderRowDef="data['column']"></tr>
<tr mat-row *matRowDef="let row; columns: data['column'];"></tr>
</table>
component.ts
getVariationGroup(data: any): any {
const value = data.person.map((p: any) => {
return p.details;
});
return value;
}
解説
mat-tableのdataSource属性には、テーブルに表示させたいデータのKeyとValueを渡してあげます。今回の場合は、上記データのdetailsの部分になります。
matColumnDef属性には、各カラム名を入れます。ここがカラムと紐付いています。
tdタグの*matCellDef属性には、dataSourceに渡された配列データが順番に渡されます。なので、変数を定義してあげましょう。
trタグのmat-header-rowはtableのヘッダーを、mat-rowはtableの1行分の定義を行っています。
*matHeaderRowDef属性には、カラムの配列データを渡しましょう。通常はこのカラムの配列データの順番にカラムが作成されます。
*matRowDefには、tdタグの*matCellDef属性と同じようにdataSourceに渡された配列データとそれに紐付くようにカラムの配列データを渡します。
今後に向けて
インデントぐちゃぐちゃになるのどうにかしたいんだけど、どうしたらいいのかな・・・
ブログにこの記事あげたら絶対コード見にくくなってる。すみません。
次はmat-table内でmat-iconを使う方法について記事にしたいと思います。
参考
素晴らしい記事に感謝いたします。
