I am struggling with saving the selected item from a dropdown list. Below is the code I have been working on. Currently, I am able to console.log the values of selectedProject.id and selectedProject.name using a button and the function outData. However, I am unable to display the value of selectedProject.name in the HTML by itself.
Whenever I try to print this data, I encounter the following error:
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">Project:</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>