Escribí un servicio que toma dos modelos, uno con cédula y otro con título. Cuando quiero seleccionar el valor en el formulario en el cuadro de selección de formulario, quiero mostrarlo en la página. Cuando lo muestro, quiero que se muestre el título en lugar del valor del título de ID.

Me encuentro con este error.

Error: src/app/Components/employee-info/employee-info.component.ts:31:31 - error TS2532: el objeto posiblemente está 'indefinido'.

31 this.employee.GradeTitle= this.grade.find(q=> q.Id==this.employee.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; } }

modelo.ts

exportar clase KeyValue { constructor(

 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; } }