I need help with saving selected item from dropdown list.
Here is my code. With this code I can console.log selectedProject.id
and selectedProject.name
by button and function outData
. But I can't show selectedProject.name
in HTML by itself.
When I trying print this data I get this 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">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>
public selectedProject: Project = new Project();
and
<option *ngFor="let project of projects" [ngValue]="project">{{project?.name}}</option>