Angularで作るER DIAGRAM TOOL – 第七回 モデル修正・削除機能の実装。およびER図エリアへの表示
左カラムに表示するmodel用のコンポーネントを作ります。
/src/app/model/model.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/55c3448c6a49a1221bf5958905261fdf555e349f#diff-14ac3c6b037418c538e10e3c5571bbbe
・appComponentからmodelを受け継ぐため、Inputをimportしてます。
・メソッドeditModel()は、モデルモーダルを開くように記述
・メソッドdeleteModel()は、confirmウィンドウで確認ののち、dataServiceのdeleteModel()メソッドを呼び出しています。
※ちなみにdataService.editModel()が必要ないのは、双方向バインディングで、入力するそばから変更されるためです。
/src/app/service/data.service.ts
https://github.com/dog-ears/er-diagram-tool/commit/55c3448c6a49a1221bf5958905261fdf555e349f#diff-ae990bb302f27e60323deb45d6746b17
・deleteModel()メソッド追加。
model.component.htmlを修正する前に、modelクラスに２つのメソッドを追加します。
/src/app/class/model.ts
https://github.com/dog-ears/er-diagram-tool/commit/55c3448c6a49a1221bf5958905261fdf555e349f#diff-15a154169b0b6112f2adcdf51a565ee2
・getElementId()・・・「model1」のような文字列を返す。html上のmodelのid名に使います。
・getElementH2Id()・・・「model1-h2」のような文字列を返す。html上のmodelのH2のid名に使います。
/src/app/model/model.component.html
https://github.com/dog-ears/er-diagram-tool/commit/55c3448c6a49a1221bf5958905261fdf555e349f#diff-14ac3c6b037418c538e10e3c5571bbbe
・modelのis_pivotプロパティによって、class名を出しわけています。is_pivotを使うのは、だいぶ後なので、とりあえず気にしない。
[class.list-group-item-primary]="myModel.is_pivot === false" [class.list-group-item-secondary]="myModel.is_pivot === true"
※pivotとは、多対多リレーションシップを作る際、モデルとモデルの間にできる中間モデル（テーブル）のことです。
/src/app/model/model.component.css
https://github.com/dog-ears/er-diagram-tool/commit/55c3448c6a49a1221bf5958905261fdf555e349f#diff-695cbf9497ae15d1c0f19a8c53eee640
・とりあえず空
上記、準備完了したところで、moduleに読み込みます。
/src/app/app.module.ts
https://github.com/dog-ears/er-diagram-tool/commit/55c3448c6a49a1221bf5958905261fdf555e349f#diff-fc6b22833aeaf77f8440c4970ade705e
・ModelComponentをimport
/src/app/app.component.html
https://github.com/dog-ears/er-diagram-tool/commit/55c3448c6a49a1221bf5958905261fdf555e349f#diff-465e9f13ce23ec4a1e366935273fdbb6
・左カラムエリアにmodelコンポーネントを読み込みます。
<model *ngFor="let model of data.models" [myModel]="model"></model>
・*ngForの繰り返しは、書式を覚えてしまいましょう。
・[myModel]でデータを子コンポーネントに渡します。子コンポーネント側で@Input() myModel;するのを忘れずに
ここで、プレビュー確認。
文字が極端にでかいので、文字サイズを調整します。
/src/styles.css
https://github.com/dog-ears/er-diagram-tool/commit/55c3448c6a49a1221bf5958905261fdf555e349f#diff-0fd3637456511d89012d5274dd855970
・model以下すべて（のちほど追加するSchemaコンポーネント部分にも）に適用したいので、トップレベルのcssに記述してます。
これでモデルの追加・変更・削除が実装されました。
次回は、Schemaの追加・編集・削除を実装します。