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.
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.
This adds, modifies, and deletes models.
Next time, we will implement Schema addition, editing and deletion.
Discussion
New Comments
No comments yet. Be the first one!