【Angular】Excelやスプレッドシートのような表を作ってみた⑥【テキスト修正時のフォント色変更(クラス付与)編】
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
概要
この度、作りたかった表が完成したので、その作業内容を数回に分けて記事にしていきます。
今回はその記事のラスト(第6回目)です。
少し複雑なデータ構造をループで表示させて、さらにそのデータを個別に変更する処理の方法を知りたい方にオススメの記事です。
・第5回 要素(div/input)切り替え(スタイルバインディング)編
・第6回 テキスト修正時のフォント色変更(クラス付与)編
完成形
実装した機能(?)紹介
・ネストがあるデータを表形式で表示
・mat-icon使用
・表1列目固定
・横スクロール
・リスト表示切り替え
・要素(div/input)の切り替え
・テキスト修正後、クラス追加(赤字切り替え)
テキスト修正時のフォント色変更(クラス付与)編
テーマ
今回はテキストを修正した時に、フォント色を赤に変更させます。
前提
前回記事の続きになります。
URL
型定義は省いています。
データ構成です。
data = { column: [ "Camera", "Name", "Gender", "Hobby" ],
left_column: [ "FirstName", "Hobby2"],
right_column: [ "LastName", "Hobby3"],
person: [{
info: { info1: "loud", info2: "big" },
details: { 'ユニークキー':"abc1", Name: "Taro", Gender: "1", Hobby: "", FirstName: "Taro", LastName: "Tanaka", Hobby2: "", Hobby3: "" }
},
{
info: { info1: "", info2: "" },
details: { 'ユニークキー':"abc2", Name: "Hanako", Gender: "2", Hobby: "", FirstName: "Hanako", LastName: "Yamada", Hobby2: "", Hobby3: "" }
}]
}
コード
component.html
<div class="person-table">
・・・・・・
+ <input type='text'
class="{{person['ユニークキー'] + column}}"
[(ngModel)]='person[column]'
[style.display]="isVisible[person['ユニークキー'] + column] ? 'inline-block' : 'none'"
(blur)="toggleVisible(person['ユニークキー'], column)"
(change)="addFontRedClass(person['ユニークキー'], column)"
>
+ <div class="{{person['ユニークキー'] + column}}"
[style.display]="!isVisible[person['ユニークキー'] + column] ? 'block' : 'none'"
(dblclick)="toggleVisible(person['ユニークキー'], column)"
>
・・・・・・
</div>
<div class="right-person-table">
・・・・・・
+ <input type='text'
class="{{person['ユニークキー'] + column}}"
[(ngModel)]='person[column]'
[style.display]="isVisible[person['ユニークキー'] + column] ? 'inline-block' : 'none'"
(blur)="toggleVisible(person['ユニークキー'], column)"
(change)="addFontRedClass(person['ユニークキー'], column)"
>
+ <div class="{{person['ユニークキー'] + column}}"
[style.display]="!isVisible[person['ユニークキー'] + column] ? 'block' : 'none'"
(dblclick)="toggleVisible(person['ユニークキー'], column)"
>
・・・・・・
</div>
component.ts
+ import { DOCUMENT } from '@angular/common';
export class PersonComponent implements OnInit {
・・・・・・・・・・
+ constructor(@Inject(DOCUMENT) private document: any) { }
ngOnInit() {
・・・・・・・・・・
+ addFontRedClass(uniqueKey, column) {
+ const className = uniqueKey + column;
+ const inputClass = 'input[class^="' + className + '"]';
+ const inputEl = this.document.querySelector(inputClass);
+ if (inputEl) {
+ inputEl.classList.add('change-data');
+ }
+ const divClass = 'div[class*="' + className + '"]';
+ const divEl = this.document.querySelector(divClass);
+ if (divEl) {
+ divEl.classList.add('change-data');
+ }
+ }
}
component.scss
.change-data {
color: red;
}
ポイント
物凄く見にくくてすみません。。。
今回は特にポイントはありません。要素を指定してあげて、クラスを付与するだけです。
逆にquerySelectorメソッドを使うのが正解なのか不安・・・
Elementを探さずに、classを付与する方法がありそう。
今後に向けて
この表を作るのに、自分は1ヶ月程かかりました。上司は1週間程で作れるとのこと。
しかし、こうやって冷静にまとめてみると、1日でもできそうな気がします。
無知ゆえの仕事の遅さですね。
日頃から勉強して、いついかなる時でも大体の仕様が頭に思い浮かぶようになりたいものです。できれば、さらにその場でアウトプットできるようになりたいです。
