如何从 angular 2 的下拉列表中保存所选项目

Question

我需要帮助来保存从下拉列表中选择的项目。这是我的代码。使用此代码，我可以通过按钮和功能 outData console.log selectedProject.id 和 selectedProject.name。但我无法单独在 HTML 中显示 selectedProject.name。

当我尝试打印此数据时出现此错误：

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>

如何从 angular 2 的下拉列表中保存所选项目

How can i save selected item from dropdown list in angular 2

typescript

angular2-forms

angular2-databinding

angular