モデル修正・削除機能の実装。モデル修正・削除機能の実装。作ってみる左カラムに表示するmodel用のコンポーネントを作ります。/src/app/model/model.component.tshttps://github.com/dog-ears/er-diagram-tool/commit/55c3448c6a49a1221bf5958905261fdf555e349f#diff-14ac3c6b037418c538e10e3c5571bbbe・appComponentからmodelを受け継ぐため、Inputをimportしてます。・メソッドdeleteModel()は、confirmウィンドウで確認ののち、dataServiceのdeleteModel()メソッドを呼び出しています。※ちなみにdataService.editModel()が必要ないのは、双方向バインディングで、入力するそばから変更されるためです。/src/app/service/data.service.tshttps://github.com/dog-ears/er-diagram-tool/commit/55c3448c6a49a1221bf5958905261fdf555e349f#diff-ae990bb302f27e60323deb45d6746b17・deleteModel()メソッド追加。model.component.htmlを修正する前に、modelクラスに2つのメソッドを追加します。/src/app/class/model.tshttps://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.htmlhttps://github.com/dog-ears/er-diagram-tool/commit/55c3448c6a49a1221bf5958905261fdf555e349f#diff-14ac3c6b037418c538e10e3c5571bbbe・modelのis_pivotプロパティによって、class名を出しわけています。is_pivotを使うのは、だいぶ後なので、とりあえず気にしない。true”※pivotとは、多対多リレーションシップを作る際、モデルとモデルの間にできる中間モデル(テーブル)のことです。上記、準備完了したところで、moduleに読み込みます。/src/app/app.module.tshttps://github.com/dog-ears/er-diagram-tool/commit/55c3448c6a49a1221bf5958905261fdf555e349f#diff-fc6b22833aeaf77f8440c4970ade705e・ModelComponentをimport/src/app/app.component.htmlhttps://github.com/dog-ears/er-diagram-tool/commit/55c3448c6a49a1221bf5958905261fdf555e349f#diff-465e9f13ce23ec4a1e366935273fdbb6・左カラムエリアにmodelコンポーネントを読み込みます。[myModel]=”model”></model>・*ngForの繰り返しは、書式を覚えてしまいましょう。・[myModel]でデータを子コンポーネントに渡します。myModel;するのを忘れずにここで、プレビュー確認。文字が極端にでかいので、文字サイズを調整します。/src/styles.csshttps://github.com/dog-ears/er-diagram-tool/commit/55c3448c6a49a1221bf5958905261fdf555e349f#diff-0fd3637456511d89012d5274dd855970・model以下すべて(のちほど追加するSchemaコンポーネント部分にも)に適用したいので、トップレベルのcssに記述してます。これでモデルの追加・変更・削除が実装されました。次回は、Schemaの追加・編集・削除を実装します。one-to-manyリレーションシップ作成の流れは以下の通り。編集機能を実装navbarからモーダルでフォームを開き、dataを編集できるようにします。今回は、dataのmodelを追加する機能を実装します。jsPlumbの導入、およびモデルをドラッグ可能に今回からjsplumbの実装に進みます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト最近の投稿とりあえずESlistとprettierでコードフォーマットしたい人へ。Codeで動く設定ファイルをさらしてみる。Expressなしで、最短でNuxt(SSR)をfirebaseで公開してみる。まとめ【初心者向け】ドラゴンボールクリッカーを作ってみた。