来自定制指令的angular中的默认选择列表项如何通过服务从模型中获取值？

Question

employee.model.ts

export class Employee {
    public id: number;
    public name: string;
    public gender: string;
    public email: string;
    public phoneNumber?: number;
    public contactPreference: string;
    public dateofBirth: Date;
    public department: string;
    public isActive: Boolean;
    public imagePath: string;

    constructor(id: number, name: string, gender: string, email: string,
    phoneNumber: number, contactPreference: string, dateofBirth: Date, department: string,
    isActive: Boolean, imagePath: string) {
        this.id = id;
        this.name = name;
        this.gender = gender;
        this.email = email;
        this.phoneNumber = phoneNumber;
        this.contactPreference = contactPreference;
        this.dateofBirth = dateofBirth;
        this.department = department;
        this.isActive = isActive;
        this.imagePath = imagePath;


    }

}

employee.service.ts

import { Employee } from "./employee.model";
import { Injectable, OnInit } from "@angular/core";


@Injectable({
  providedIn: 'root',
})

export class EmployeeService implements OnInit {

    employees: Employee[] = [
        new Employee(19856, 'Smith', 'Male', 'smith@gmail.com', 1234567890, 'Phone', new Date('06/10/1991'),'IT', true, 'assets/images/male.png'),
        new Employee(26004, 'natalia', 'Female', 'natalia@gmail.com', 9876543211, 'Phone', new Date('06/30/1991'),'HR', true, 'assets/images/female.png'),
        new Employee(25990, 'Julia', 'Female', 'julia@gmail.com', 12344509876, 'Phone', new Date('02/28/2002'),'Manager', true, 'assets/images/female2.png')
    ]

    constructor() {

    }

    ngOnInit() {}

    getEmployees() {
        return this.employees.slice();
    }
}

createemp.component.html

<div class="form-group">
          <label for="department">Department:</label>
          <select class="form-control" name="department" ngModel 
          #department="ngModel" appSelectValidator="select"
          >
            <option value="select" >Select Department</option>
            <option value="1">HR</option>
            <option value="2">IT</option>
            <option value="3">Help Desk</option>
            <option value="4">Payroll</option>
          </select>
       </div>

select-required.directive.ts

import { Validator, AbstractControl, NG_VALIDATORS } from "../../../node_modules/@angular/forms";
import { Directive, Input } from "../../../node_modules/@angular/core";

@Directive({
    selector: '[appSelectValidator]',
    providers: [{
        provide: NG_VALIDATORS,
        useExisting: SelectRequiredDirective,
        multi: true
    }]
})


export class SelectRequiredDirective implements Validator {

    @Input('appSelectValidator') defaultValue: string;

    validate(control: AbstractControl): { [key: string]: any } | null {
        return control.value === this.defaultValue ? { defaultSelect: true } : null;
    }


}

create-employee.component.ts

import { Component, OnInit } from '@angular/core';
import { Employee } from '../employee.model';
import { EmployeeService } from '../employee.service';

import { NgForm } from '@angular/forms';


@Component({
  selector: 'app-create-employee',
  templateUrl: './create-employee.component.html',
  styleUrls: ['./create-employee.component.css']
})
export class CreateEmployeeComponent implements OnInit {


  select: string;  
  employee: Employee[];

  constructor(private empService: EmployeeService) { }

  ngOnInit() {
    this.select = this.employee.department;
  }


}

现在我要显示所选列表，因为默认值为“选择部门”。

下面我得到了错误，如何提前实现此错误。

错误TypeError：无法读取未定义的属性“部门”     在CreateEmployeeComponent.push ../ src / app / employees / create-employee / create-employee.component.ts.CreateEmployeeComponent.ngOnInit