0

I am making a beginner website and everything was good so far but I have a strange problem now.

When type ng serve --open in the node.js console to start the site on the localhost I receive this message ->

ERROR in src/app/department-detail/department-detail.component.ts(59,32): error TS2339: Property 'employee' does not exist on type 'Department'

My code is that: 

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { Department } from '../department';

import { DepartmentService }  from '../department.service';

import { Employee } from '../employee';
import { EmployeeService }  from '../employee.service';
@Component({
  selector: 'app-department-detail',
  templateUrl: './department-detail.component.html',
  styleUrls: ['./department-detail.component.css']
})
export class DepartmentDetailComponent implements OnInit {

  department : Department ;
  employees: Employee[];
  emp: Employee;
  average:number=1;


  constructor(private route: ActivatedRoute, private departmentService: DepartmentService, private location: Location,private employeeService: EmployeeService) { }

  ngOnInit() {
    this.getDepartment();

    this.getEmployees();
  }
  getDepartment(): void{
    const id = +this.route.snapshot.paramMap.get('id');
    this.departmentService.getDepartment(id).subscribe(department => this.department = department)
  }

  goBack(): void{
    this.location.back();
  }
  save(): void {
   this.departmentService.updateDepartment(this.department);
   this.goBack();
 }

 getEmployees(): void {
   this.employeeService.getEmployees().
   subscribe(employees => this.employees = employees);
 }

 Select(firstname:string){
   firstname = firstname.trim();
   if(!firstname){return;}
   this.employeeService.getEmployeeByName(firstname).subscribe(Employee => this.emp = Employee);
 }

 Delete():void{
   this.emp = null;
   this.average = 1;
 }
 Show():void{
   this.Select(this.department.employee); // this cant be true
   this.average = null;
 }


}

The problem is in the last

Show function

If I delete employee and save and then add it again the side works but otherwise it does not.

This is my department component.

export class Department{
    id: number;
    name: string;
    location: string;
    menId: number;
    static Id:number = 1;

    constructor(name: string,location: string) {
        this.id = Department.Id++;
        this.name = name;
        this.location = location;
        this.menId = 0;

    }

}

I am not sure whether I should add a property of type Employee in the Department component.

Ангел Хаджиев
  • 15
  • 1
  • 7

1 Answers1

0

If you look at the Department class you will notice that it, in fact, doesn't have the employee property. You should add one like this:

export class Department{
    id: number;
    name: string;
    location: string;
    menId: number;
    static Id:number = 1;
    employee: string;        // New employee property, type based on the Show method signature

    constructor(name: string,location: string) {
        this.id = Department.Id++;
        this.name = name;
        this.location = location;
        this.menId = 0;

    }

}

After adding the property you might get another error, this time in the application runtime, saying that firstname is undefined. If you get this error, it is thrown by the Select method, in which you first try to trim the name and then you check whether it's defined or non-empty. To prevent the error you should simply swap the first and the second lines of the Select method so they look like this:

if(!firstname){ return; }
firstname = firstname.trim();
Szab
  • 1,263
  • 8
  • 18
  • I get this error now: ERROR in src/app/departments.ts(3,14): error TS2322: Type '{ id: number; name: string; location: string; menId: number; }[]' is not assignable to type 'Department[]'. Type '{ id: number; name: string; location: string; menId: number; }' is not assignable to type 'Department'. Property 'employee' is missing in type '{ id: number; name: string; location: string; menId: number; }'. – Ангел Хаджиев Sep 24 '18 at 20:36
  • That's because you tried to instantiate the Department class somewhere else in the code, and those objects are now missing a property you've just added. You should add the missing property to all the objects of class Department in your departments.ts file, or change the employee: string to employee?: string. The question mark means that the property is optional. Take a look at this question: https://stackoverflow.com/questions/18916104/optional-class-members-in-typescript – Szab Sep 24 '18 at 20:41
  • Oh, I found my other mistake. With what you gave me here it worked. Thanks a lot. It was a pain in my ass for a while. – Ангел Хаджиев Sep 24 '18 at 20:44