角度2のドロップダウンリストから選択したアイテムを保存するにはどうすればいいですか

Question

ドロップダウンリストから選択したアイテムを保存する際に助けが必要です。 ここに私のコードです。このコードでは、ボタンでconsole.log selectedProject.idとselectedProject.nameを入力できます。outDataです。しかし、私はselectedProject.nameを単独でHTMLに表示することはできません。

私は、このデータの印刷をしようとしたとき、私はこのエラーを取得：

EXCEPTION: Uncaught (in promise): Error: Error in http://localhost:3000/app/home.component.html:2:48 caused by: self.context.selectedProject is undefined

import { Component, OnInit, NgModule } from '@angular/core'; 
    import { Router, Routes, RouterModule, ActivatedRoute } from '@angular/router'; 
    import { FormsModule } from '@angular/forms'; 

    import { Project } from './project' 
    import { AVAILABLEPROJECTS } from './mock-projects'; 

    @Component({ 
     moduleId: module.id, 
     templateUrl: 'home.component.html', 
     styles: [` 
      .container { 
       padding-top: 41px; 
       width:435px; 
       min-height:100vh; 
      } 
     `] 
    }) 

    export class HomeComponent { 
     public projects: Project[]; 
     public selectedProject: Project; 

     constructor() { 
      this.projects = AVAILABLEPROJECTS; 
     } 

     outData() { 
      console.log(this.selectedProject.id); 
      console.log(this.selectedProject.name); 
     } 
    } 


<div class="container"> 
    <form class="form form-login" role="form"> 
    <h2 class="form-login-heading">Projekt:</h2> 
    <!--{{selectedProject.name}}--> 
    <div class="form-group"> 
     <select class="form-control" [(ngModel)]="selectedProject" name="selectedProject"> 
      <option *ngFor="let project of projects" [ngValue]="project">{{project.name}}</option> 
     <!--[value]="project"--> 
     </select> 

    </div> 
    <div> 
     <dutton (click)="outData()">Out Data</dutton> 
    </div> 
    </form> 
</div> 

Answer 1

public selectedProject: Project = new Project(); 

と

<option *ngFor="let project of projects" [ngValue]="project">{{project?.name}}</option>