Как я могу сохранить выбранный элемент из выпадающего списка в угловых 2

Question

Мне нужна помощь с сохранением выбранного элемента из выпадающего списка. Вот мой код С этим кодом я могу console.log selectedProject.id а также selectedProject.name по кнопке и функции outData, Но я не могу показать selectedProject.name в HTML сам по себе.

Когда я пытаюсь распечатать эти данные, я получаю эту ошибку:

ИСКЛЮЧЕНИЕ: Uncaught (в обещании): ошибка: ошибка в http://localhost:3000/app/home.component.html:2:48 вызванная: self.context.selectedProject не определена

 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>