編集画面でngModelを利用

src/app/app.module.ts

@@ -6,6 +6,7 @@ import { ProductListComponent } from './product/product-list/product-list.compon
 import { ProductDetailComponent } from './product/product-detail/product-detail.component';
 import { AppRoutingModule } from './app-routing.module';
 import { ProductEditComponent } from './product/product-edit/product-edit.component';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [
@@ -17,6 +18,7 @@ import { ProductEditComponent } from './product/product-edit/product-edit.compon
   imports: [
     BrowserModule,
     AppRoutingModule,
+    FormsModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/product/product-edit/product-edit.component.html

@@ -3,19 +3,19 @@
   <form class="edit-form">
     <div class="edit-line">
       <label>ID</label>
-      <span>1</span>
+      <span>{{ product.id }}</span>
     </div>
     <div class="edit-line">
       <label>名前</label>
-      <input type="text">
+      <input type="text" name="name" [(ngModel)]="product.name">
     </div>
     <div class="edit-line">
       <label>価格</label>
-      <input type="number">
+      <input type="number" name="price" [(ngModel)]="product.price">
     </div>
     <div class="edit-line">
       <label>説明</label>
-      <input type="text">
+      <input type="text" name="description" [(ngModel)]="product.description">
     </div>
   </form>
   <div class="footer">

src/app/product/product-edit/product-edit.component.ts

@@ -1,15 +1,22 @@
 import { Component, OnInit } from '@angular/core';
+import { Product } from '../../shared/models/product';
+import { ProductService } from '../../shared/services/product.service';
 
 @Component({
   selector: 'app-product-edit',
   templateUrl: './product-edit.component.html',
   styleUrls: ['./product-edit.component.scss']
 })
 export class ProductEditComponent implements OnInit {
+  product: Product;
 
-  constructor() { }
+  constructor(
+    private productService: ProductService,
+  ) {}
 
   ngOnInit() {
+    this.productService.get(2).subscribe((product: Product) => {
+      this.product = product;
+    });
   }
-
 }