I wrote a service that takes two models, one with an ID and the other with a title. When I want to select the value in the form in the form selection box, I want to display it in the page. When I display it, I want the title to be displayed instead of the ID title value .

I encounter this error.

Error: src/app/Components/employee-info/employee-info.component.ts:31:31 - error TS2532: Object is possibly 'undefined'.

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

}

model.ts

export class 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;


  }

}