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

Create a component for the model to display in the left column.

/src/app/model/model.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/55c3448c6a49a1221bf5958905261fdf555e349f#diff-14ac3c6b037418c538e10e3c5571bbbe

· Input is imported to inherit model from appComponent.
· The method editModel () is described to open the model modal
· The method deleteModel () confirms with the confirm window and then calls the deleteModel () method of dataService.
By the way, dataService.editModel () is not necessary because it is bi-directional binding, it is changed from input as soon as possible.

/src/app/service/data.service.ts
https://github.com/dog-ears/er-diagram-tool/commit/55c3448c6a49a1221bf5958905261fdf555e349f#diff-ae990bb302f27e60323deb45d6746b17

· Add deleteModel () method.

Before modifying model.component.html, add two methods to the model class.

/src/app/class/model.ts
https://github.com/dog-ears/er-diagram-tool/commit/55c3448c6a49a1221bf5958905261fdf555e349f#diff-15a154169b0b6112f2adcdf51a565ee2

· GetElementId () … Returns a character string like ‘model1’. Used for id name of model on html.
· GetElementH2Id () … Returns a character string such as “model1 – h2”. It is used for the id name of H2 of model on html.

/src/app/model/model.component.html
https://github.com/dog-ears/er-diagram-tool/commit/55c3448c6a49a1221bf5958905261fdf555e349f#diff-14ac3c6b037418c538e10e3c5571bbbe

· The class name is separated by the is_pivot property of model. I use is_pivot much later, so I do not mind for the time being.
[class.list – group – item – primary] = “myModel.is_pivot === false” [class.list – group – item – secondary] = “myModel.is_pivot === true”

※ pivot is an intermediate model (table) that can be created between a model and a model when creating a many-to-many relationship.

/src/app/model/model.component.css
https://github.com/dog-ears/er-diagram-tool/commit/55c3448c6a49a1221bf5958905261fdf555e349f#diff-695cbf9497ae15d1c0f19a8c53eee640

· Tentatively blank

Once ready, load it into module.

/src/app/app.module.ts
https://github.com/dog-ears/er-diagram-tool/commit/55c3448c6a49a1221bf5958905261fdf555e349f#diff-fc6b22833aeaf77f8440c4970ade705e

· Import ModelComponent

/src/app/app.component.html
https://github.com/dog-ears/er-diagram-tool/commit/55c3448c6a49a1221bf5958905261fdf555e349f#diff-465e9f13ce23ec4a1e366935273fdbb6

· Read the model component in the left column area.
<model * ngFor = “let model of data.models” [myModel] = “model”> </ model>
· Let’s memorize the form by repeating * ngFor.
· Pass [myModel] the data to the child component. Remember to @Input () myModel; on the child component side

Here, preview confirmation.

cap07_1

Since the characters are extremely big, adjust the font size.

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

· I want to apply to all the following model (also to Schema component part to be added later), so I write it in top level css.

cap07_2

This adds, modifies, and deletes models.

Next time, we will implement Schema addition, editing and deletion.

シェアする

  • このエントリーをはてなブックマークに追加

フォローする