Question

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

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

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

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

1 个答案: