在另一页的表单中显示所选值(标记选择)

Question

我编写了一个服务，它采用两个模型，一个带有ID，另一个带有标题。当我想在表单选择框中选择表单中的值时，我想在页面中显示它。当我显示它时，我希望显示标题，而不是ID标题值。

我遇到了这个错误。

错误：src/app/Components/employee-info/employee info.component.ts:31:31-错误TS2532:对象可能"未定义"。

31 this.employee.GradeTitle=this.grade.find(q=>q.Id==this.empleyee.GradeId(.Title；

service.ts
import { Injectable } from '@angular/core';
import { KeyValue } from '../Module/KeyValue';
@Injectable({
providedIn: 'root'
})
export class GradeService {
grade:KeyValue[]=[
new KeyValue (1,"Deplome"),
new KeyValue (2,"Kardani"),
new KeyValue (3,"Karshenaci"),
new KeyValue (4,"Karshenci Arshad"),
new KeyValue (5,"Doctora"),
];
constructor() { }
getAll():KeyValue[]{
return this.grade;
}
}

型号.ts

导出类KeyValue{构造函数

public Id:number,
public Title:string,

)｛

}}

component.ts
import { ThrowStmt } from '@angular/compiler';
import { Component, OnInit } from '@angular/core';
import { Employee } from 'src/app/Module/Employee';
import { KeyValue } from 'src/app/Module/KeyValue';
import { GradeService } from 'src/app/Servies/grade.service';
@Component({
selector: 'app-employee-info',
templateUrl: './employee-info.component.html',
styleUrls: ['./employee-info.component.css']
})
export class EmployeeInfoComponent implements OnInit {
grade:KeyValue[];

employee:Employee=new Employee(0,"","","",0,"");
constructor( private gradeser:GradeService) { }
ngOnInit(): void {
this.grade=this.gradeser.getAll();
}
save(value:any){
console.log(value);
this.employee=value
console.log(this.employee);
console.log("Title");
this.employee.GradeTitle= this.grade.find(q=> q.Id==this.employee.GradeId).Title;

}
}

Answer 1

下面的代码将在p标记中显示所选选项。

<select [(ngModel)]="selectedOption">
<option *ngFor="let o of options">
{{o.name}}
</option>
</select>
<p>{{selectedOption}}</p>