在另一頁的表單內顯示選定的值（標簽選擇）

Question

我編寫了一個服務，它采用兩個模型，一個帶有 ID，另一個帶有標題。 當我想在表格選擇框中select表格中的值時，我想在頁面中顯示它。 當我顯示它時，我希望顯示標題而不是 ID 標題值。

我遇到這個錯誤。

錯誤：src/app/Components/employee-info/employee-info.component.ts:31:31 - 錯誤 TS2532：Object 可能是“未定義”。

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

導出 class 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>