【Angular】Excelやスプレッドシートのような表を作ってみた①【mat-table編】
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
概要
以前にmat-tableを使ってネストがあるデータを表示させる方法について記事にしました。
【Angular/Material】ネストがある配列データをmat-tableで表示させる - 大田区から発信するゆるゆる日記
上記の記事を書いていた時に実はある機能を作っていました。それは、データをブラウザに表形式で表示させ、さらにそのデータを修正できる機能です。上記の記事はその中で学んだ知識の備忘録でした。
そして、この度その表が完成しました！せっかくなので、その作業内容を数回に分けて記事にしていこうと思います。
少し複雑な構造のデータをループで表示させ、さらにそのデータを個別で変更できる機能を作りたい方にオススメの記事です（基本的なことをしているだけかもしれませんが・・・）
・第1回 mat-table編
・第5回 要素(div/input)切り替え(スタイルバインディング)編
実装した機能(?)紹介
・ネストがあるデータを表形式で表示
・mat-icon使用
・表1列目固定
・横スクロール
・リスト表示切り替え
・要素(div/input)の切り替え
・テキスト修正後、クラス追加(赤字切り替え)
完成画像
※はてブは動画貼れないんですね...
完成形
横スクロール
リスト切り替え（右上上部バーにより右下リストの表示内容切り替え）
要素の切り替え(div⇆input)
テキスト修正後、赤字に切り替え
mat-table編
テーマ
今回はmat-tableの実装を行います。
前提
mat-table編は前回書いた記事から基本的な内容を省いた記事です。より詳しい内容を知りたい場合は、前回記事を参考にしてみてください。
【Angular/Material】ネストがある配列データをmat-tableで表示させる - 大田区から発信するゆるゆる日記
型定義は省いています。
データ構成です。
※見にくくてすみませんmm
data = { column: [ "Name", "Gender", "Hobby" ] ,
person: [{
info: { info1: "loud", info2: "big" },
details: { Name: "Taro", Gender: "1", Hobby: "" }
},
{
info: { info1: "", info2: "" },
details: { Name: "Hanako", Gender: "2", Hobby: "" }
}]
}
コード
component.html
<mat-table [dataSource]="getData(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 person">
<input type='text' [(ngModel)]='person[column]'>
</td>
</ng-container>
</ng-container>
<tr mat-header-row *matHeaderRowDef="data['column']"></tr>
<tr mat-row *matRowDef="let row; columns: data['column'];"></tr>
</mat-table>
component.ts
getData(data) {
const value = data.person.map(p => {
return p.details;
});
return value;
}
ポイント
ポイントはdataSource属性に指定しているgetDataメソッドです。getDataメソッドでcolumn配列をKeyとするオブジェクトデータを取得しています。もちろん、このオブジェクトデータをあらかじめcomponentの変数に格納しておき、html側で変数だけを指定するのもokです。
今後に向けて
次回はmat-table内でmat-iconを使う方法を書いていきます。
参考
素晴らしい記事に感謝いたします。
