Help us understand the problem. What is going on with this article?

Angularで作るER DIAGRAM TOOL - 第七回 モデル修正・削除機能の実装。およびER図エリアへの表示

More than 1 year has passed since last update.

左カラムに表示する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クラスに2つのメソッドを追加します。

/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コンポーネントを読み込みます。

・*ngForの繰り返しは、書式を覚えてしまいましょう。
・[myModel]でデータを子コンポーネントに渡します。子コンポーネント側で@Input() myModel;するのを忘れずに

ここで、プレビュー確認。

cap07_1.png

文字が極端にでかいので、文字サイズを調整します。

/src/styles.css
https://github.com/dog-ears/er-diagram-tool/commit/55c3448c6a49a1221bf5958905261fdf555e349f#diff-0fd3637456511d89012d5274dd855970

・model以下すべて(のちほど追加するSchemaコンポーネント部分にも)に適用したいので、トップレベルのcssに記述してます。

cap07_2.png

これでモデルの追加・変更・削除が実装されました。

次回は、Schemaの追加・編集・削除を実装します。

dog-ears
主に、PHP、laravel、Angular、Cloud9などに興味あり。
http://dog-ears.net/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away