1

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

当我尝试打印此数据时，我收到此错误：

例外：未捕获（承诺）：错误： 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>
4

1 回答 1

2 
public selectedProject: Project = new Project();

和

<option *ngFor="let project of projects" [ngValue]="project">{{project?.name}}</option>
于 2017-01-24T12:55:14.203 回答